Detailed explanation of how to swap the positions of buttons in two divs using jQuery-JS Tutorial-php.cn

Detailed explanation of how to swap the positions of buttons in two divs using jQuery

小云云

Release： 2017-12-27 11:12:48

Original

2980 people have browsed it

This article mainly introduces the example code of using jQuery to realize the swap position of buttons in two p. Friends in need can refer to it. I hope it can help everyone.

The effect is as follows

Detailed explanation of how to swap the positions of buttons in two divs using jQuery

The code is as follows:

<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() {
     //判断如果此按钮的父控件是p1
     if($(this).parent().is("#p1")) {
      //移除此按钮
      $(this).remove();
      //转移到p2
      $(this).appendTo("#p2")
     } else {
      //否则他的父控件是p2 那么就把他移动到p1
      $(this).appendTo("#p1")
     }
    }
   }
  });
 </script>
</head>
<style>
 p {
  width: 500px;
  height: 200px;
  border: 1px;
  background-color: beige;
 }
 button {
  width: 50px;
  height: 30px;
 }
</style>
<body>
 <p id="p1">
  <p>我选择的：</p>
 </p>
 <p id="p2">
  <p>还可以选：</p>
  <button>数学</button>
  <button>英语</button>
  <button>体育</button>
  <button>美术</button>
  <button>物理</button>
  <button>啦啦</button>
  <button>化学</button>
  <button>历史</button>
  <button>地理</button>
  <button>生物</button>
 </p>
</body>

Copy after login

Related recommendations:

Detailed explanation of the values of radio buttons, check buttons and drop-down lists in Vue.js form tags

HTML implementation code for adding quantity subscripts to message buttons

JS problem of setting anonymous functions for button loops

The above is the detailed content of Detailed explanation of how to swap the positions of buttons in two divs using jQuery. For more information, please follow other related articles on the PHP Chinese website!