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