使用jQuery实现两个div中按钮互换位置的实例代码
程序员文章站
2022-07-06 20:54:42
效果如下
代码如下：
...</div>
<div class="content">
<p>效果如下</p>
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"title="使用jQuery实现两个div中按钮互换位置的实例代码" alt="使用jQuery实现两个div中按钮互换位置的实例代码" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIxMi9iXzFfMjAxNzEyMTIxODE0NTg2OTA4LmpwZw==" style="font-size: medium; font-family: simsun; white-space: normal; word-spacing: 0px; text-transform: none; font-weight: normal; color: rgb(0,0,0); font-style: normal; orphans: 2; widows: 2; letter-spacing: normal; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"><span style="font-size: medium; font-family: simsun; white-space: normal; word-spacing: 0px; text-transform: none; float: none; font-weight: normal; color: rgb(0,0,0); font-style: normal; orphans: 2; widows: 2; display: inline !important; letter-spacing: normal; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"><span class="apple-converted-space"> </span></span></p>
<p>代码如下：</p>
<div class="jb51code">
<pre class="brush: javascript;">
<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></pre>
</div>
<p><span style="color: #ff0000"><strong>总结</strong></span></p>
<p>以上所述是小编给大家介绍的使用jquery实现两个div中按钮互换位置的实例代码，希望对大家有所帮助
</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1667210.html">
详解nodejs通过代理(proxy)发送http请求(request) </a>
</p>
<p>
下一篇： <a href="/article/1667212.html">
EL表达式截取字符串的函数说明 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/1667211.html" target="_blank" title="使用jQuery实现两个div中按钮互换位置的实例代码">
<h2>
使用jQuery实现两个div中按钮互换位置的实例代码 </h2>
</a>
</li>
<li>
<a href="/article/1657913.html" target="_blank" title="使用jquery实现div的tab切换实例代码">
<h2>
使用jquery实现div的tab切换实例代码 </h2>
</a>
</li>
<li>
<a href="/article/1595838.html" target="_blank" title="Jquery实现点击按钮,连续地向textarea中添加值的实例代码">
<h2>
Jquery实现点击按钮,连续地向textarea中添加值的实例代码 </h2>
</a>
</li>
<li>
<a href="/article/726774.html" target="_blank" title="Jquery实现点击按钮,连续地向textarea中添加值的实例代码_jquery">
<h2>
Jquery实现点击按钮,连续地向textarea中添加值的实例代码_jquery </h2>
</a>
</li>
<li>
<a href="/article/713112.html" target="_blank" title="jQuery实现两个div中按钮互换位置代码分享">
<h2>
jQuery实现两个div中按钮互换位置代码分享 </h2>
</a>
</li>
<li>
<a href="/article/576390.html" target="_blank" title="一段div css代码, 让页面中的两个div左右排列。 如果不使用float应该怎么实现？_html/css_WEB-ITnose">
<h2>
一段div css代码, 让页面中的两个div左右排列。 如果不使用float应该怎么实现？_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/543431.html" target="_blank" title="jQuery实现两个div中按钮互换位置代码分享">
<h2>
jQuery实现两个div中按钮互换位置代码分享 </h2>
</a>
</li>
<li>
<a href="/article/529266.html" target="_blank" title="使用jQuery实现两个div中按钮互换位置的实例代码">
<h2>
使用jQuery实现两个div中按钮互换位置的实例代码 </h2>
</a>
</li>
<li>
<a href="/article/416360.html" target="_blank" title="一段div css代码, 让页面中的两个div左右排列。 如果不使用float应该怎么实现？_html/css_WEB-ITnose">
<h2>
一段div css代码, 让页面中的两个div左右排列。 如果不使用float应该怎么实现？_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/410644.html" target="_blank" title="使用jquery实现div的tab切换实例代码">
<h2>
使用jquery实现div的tab切换实例代码 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>