本文主要介绍了使用jQuery实现两个p中按钮互换位置的实例代码,需要的朋友可以参考下，希望能帮助到大家。
效果如下
代码如下：
<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>相关推荐：
关于Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值详解
Atas ialah kandungan terperinci jQuery实现两个div中按钮互换位置详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Apakah pemalam jquery?
Bagaimana untuk mengendalikan json dengan jquery
Bagaimana untuk memadam elemen dalam jquery
Penggunaan kaedah jQuery hover().
jquery melaksanakan kaedah paging
Apakah elemen tersembunyi dalam jquery
Apa yang ditonjolkan dalam jquery
Berita rasmi terkini hari ini mengenai PaiCoin adalah benar
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
