Cet article présente principalement l'exemple de code d'utilisation de jQuery pour réaliser l'échange de positions de boutons dans deux p. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.
L'effet est le suivant
Le code est le suivant :
<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>
Recommandations associées :
Code d'implémentation HTML pour l'ajout d'indices de quantité sur les boutons de message
Problème JS de définition de fonctions anonymes pour les boucles de boutons
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!