首页 > 代码库 > jQuery实现两个按钮的位置互换

jQuery实现两个按钮的位置互换

2024-08-17 12:06:00   217人阅读

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

 

jQuery实现两个按钮的位置互换


联系
我们