Heim > Web-Frontend > js-Tutorial > Hauptteil

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
2965 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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!