使⽤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")
}
jquery弹出div窗口}
}
});
</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:729038198，我们将在24小时内删除。