页面上有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>