效果如下
代碼如下：
<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() { //判斷如果此按鈕的父控件是div1 if($(this).parent().is("#div1")) { //移除此按鈕 $(this).remove(); //轉移到div2 $(this).appendTo("#div2") } else { //否則他的父控件是div2 那么就把他移動到div1 $(this).appendTo("#div1") } } } }); </script></head><style> div { width: 500px; height: 200px; border: 1px; background-color: beige; } button { width: 50px; height: 30px; }</style><body> <div id="div1"> <p>我選擇的：</p> </div> <div id="div2"> <p>還可以選：</p> <button>數學</button> <button>英語</button> <button>體育</button> <button>美術</button> <button>物理</button> <button>啦啦</button> <button>化學</button> <button>歷史</button> <button>地理</button> <button>生物</button> </div></body>總結
以上所述是小編給大家介紹的使用jQuery實現兩個div中按鈕互換位置的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
