suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery implementiert Code-Sharing zum Austauschen der Positionen von Schaltflächen in zwei Divs

jQuery implementiert Code-Sharing zum Austauschen der Positionen von Schaltflächen in zwei Divs

小云云
小云云Original
2018-02-07 11:15:142210Durchsuche

Dieser Artikel stellt Ihnen hauptsächlich den Beispielcode für die Verwendung von jQuery vor, um die Swap-Position der Schaltflächen in zwei Seiten zu realisieren. Ich hoffe, er kann Ihnen helfen.

Der Effekt ist wie folgt

jQuery implementiert Code-Sharing zum Austauschen der Positionen von Schaltflächen in zwei Divs

Der Code ist wie folgt: 


<head>
 <meta charset="utf-8" />
 <title></title>
 <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
 <script type="text/javascript">
  $(function() {
   //定义一个变量等于所有button按钮
   var btns = $("button");
   //for循环进行遍历 
   for(var i = 0; i < btns.length; i++) {
    //i控制他的下标确定的是那个按钮的点击事件
    btns[i].onclick = function() {
     //判断如果此按钮的父控件是p1
     if($(this).parent().is("#p1")) {
      //移除此按钮
      $(this).remove();
      //转移到p2
      $(this).appendTo("#p2")
     } else {
      //否则他的父控件是p2 那么就把他移动到p1
      $(this).appendTo("#p1")
     }
    }
   }
  });
 </script>
</head>
<style>
 p {
  width: 500px;
  height: 200px;
  border: 1px;
  background-color: beige;
 }
 button {
  width: 50px;
  height: 30px;
 }
</style>
<body>
 <p id="p1">
  <p>我选择的：</p>
 </p>
 <p id="p2">
  <p>还可以选：</p>
  <button>数学</button>
  <button>英语</button>
  <button>体育</button>
  <button>美术</button>
  <button>物理</button>
  <button>啦啦</button>
  <button>化学</button>
  <button>历史</button>
  <button>地理</button>
  <button>生物</button>
 </p>
</body>

Verwandte Empfehlungen:

WeChat-Applet-Tasten-Schiebefunktionscode

Anleitung Implementieren Sie reinen Text mit HTML+CSS und Schaltflächen mit Symbolen

JQuery Mobile Folding Navigation Button Implementierungs-Tutorial

Das obige ist der detaillierte Inhalt vonjQuery implementiert Code-Sharing zum Austauschen der Positionen von Schaltflächen in zwei Divs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung in das Scrollverhalten von VueNächster Artikel：Einführung in das Scrollverhalten von Vue

In Verbindung stehende Artikel

Mehr sehen