Home >Web Front-end >JS Tutorial >Detailed explanation of how to swap the positions of buttons in two divs using jQuery

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

小云云Original: 2017-12-27 11:12:482982browse

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

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed example of jQuery Ajax using Token to verify identityNext article：Detailed example of jQuery Ajax using Token to verify identity

See more

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

Related articles