頁面上有2個按鈕A和B.點擊按鈕A和按鈕B互換位置 ,點擊按鈕B和按鈕A互換位置.應該如何實現?
html代碼如下:
<body> <!--頁面上有2個按鈕A和B. 點擊按鈕A和按鈕B互換位置 點擊按鈕B和按鈕A互換位置--> <input type="button" value="按鈕A" id="a"/> <input type="button" value="按鈕B" id="b"/> </body>
基本思路應該是在給按鈕A和按鈕B分別加上click事件,在點擊時候發生位置的改變.但是主要的問題在於:實際上按鈕的位置不是固定的..因此采用insertAfter或者insertBefore的時候需要注意現在發生點擊事件按鈕所處的位置.解決這個問題有兩種思路,其中第二種思路不需要考慮按鈕的位置問題:
第一種思路是直接進行判斷.如果當前的按鈕在另外一個按鈕的前面,就插入到另外一個按鈕的后面去.(這里采用的是父類結點的append方法實現),如果在另外一個按鈕的后面,就插入到另外一個按鈕的前面(采用父類結點的prepend方法實現).那么該如何判斷是在另外一個按鈕的后面還是前面呢?采用的是jQuery對象的is方法,先用nextAll方法,獲取所有在當前按鈕后面的元素,而is方法會判斷是否有符合過濾條件的元素.這里要提到is和has的區別.is返回的是判斷結果,是一個boolean類型的值,而has則返回的是符合過濾條件的元素,是一個jQuery對象!!有了這個思路,代碼如下:
<script> $(function() { $("#a").click(function() { // alert($x.nextAll().has("#b")); has方法返回的是jQuery!! if($(this).nextAll().is("#b")) { $("body").append($(this)); } else { $("body").prepend($(this)); } }); $("#b").click(function() { if($(this).nextAll().is("#a")) { $("body").append($(this)); } else { $("body").prepend($(this)); } }); }); </script>
第二種思路,則更為簡單,把按鈕A和按鈕B的差異拋開,實際上所要做的操作就是將body中的第一個按鈕移到最后面(畢竟,該問題的環境下只有兩個按鈕),有了這個思路,代碼量將會大為減少:
<script> $(function() { $("input").click(function() { $("body").append($("input:first")); }); }); </script>