Ausführliche Erklärung, wie man mit jQuery die Positionen von Schaltflächen in zwei Divs tauscht-js-Tutorial-php.cn

Ausführliche Erklärung, wie man mit jQuery die Positionen von Schaltflächen in zwei Divs tauscht

小云云

Freigeben： 2017-12-27 11:12:48

Original

2987 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung von jQuery zur Realisierung des Positionsaustauschs von Schaltflächen in zwei Seiten vorgestellt. Freunde, die ihn benötigen, können darauf verweisen.

Der Effekt ist wie folgt

Ausführliche Erklärung, wie man mit jQuery die Positionen von Schaltflächen in zwei Divs tauscht

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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Detaillierte Erläuterung der Werte von Optionsfeldern, Kontrollkästchen und Dropdown-Listen in Vue.js-Formular-Tags

HTML-Implementierungscode zum Hinzufügen von Mengenindizes zu Nachrichtenschaltflächen

JS-Problem beim Festlegen anonymer Funktionen für Schaltflächenschleifen

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man mit jQuery die Positionen von Schaltflächen in zwei Divs tauscht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!