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

Posted 大胡龙的小圈子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现两个按钮的位置互换相关的知识，希望对你有一定的参考价值。

　　页面上有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实现两个按钮的位置互换的主要内容，如果未能解决你的问题，请参考以下文章

WPF拖动按钮，按钮的位置互换

jquery如何实现点击LI标签和下面的LI互换顺序？ 超简单代码

点击按钮，实现两个td值互换

C#winform如何实现两个控件在拖动时互换位置

想用vb做个排座位软件，实现了两个文本框的拖拽和位置互换，但50多个的用这个办法显然不行。望高手指点。

数据结构学习-数组A[m+n]中依次存放两个线性表(a1,a2···am),(b1,b2···bn),将两个顺序表位置互换