使用jquery实现两个div中按钮互换位置

来源：互联网发布：保融软件编辑：程序博客网时间：2024/06/03 20:14

使用jquery实现两个div中按钮互换位置
效果如下
代码如下：

<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>

阅读全文

0 0