这篇文章主要介绍了使用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>

总结

以上所述是小编给大家介绍的使用jQuery实现两个div中按钮互换位置的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!

最新资讯
传捷信将员工输送到美团送外卖、还得穿工装 回应:消息不实

传捷信将员工输送到美

近日,有网友爆料称,由于受到疫情及监管影响,捷信消费有限
腾讯QQ上线青少年模式 减少对学习干扰降低社交风险

腾讯QQ上线青少年模式

QQ新版本近期上线,QQ青少年模式在原有的学习模式基础上
因公司未履行指定义务 乐视网原董事长刘淑青被限制高消费

因公司未履行指定义务

天眼查App显示,近日,乐视网信息技术(北京)股份有限公司原
58同城宣布完成与Quantum Bloom的私有化合并

58同城宣布完成与Quan

市场消息称,58同城宣布完成与Quantum Bloom的私有化合
京东健康计划本月在港IPO 刘强东变身IPO收割机

京东健康计划本月在港

9月18日消息,京东旗下超级独角兽——京东健康计划最早
特斯拉已在60个Electrify America充电站

特斯拉已在60个Electr

据国外媒体报道,电动汽车制造商特斯拉已在约60个Electr
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,