首页 > 代码库 > 信息调换
信息调换
实现效果：点击文字，文字会出现背景颜色；
点击左移/右移，文字会做出对应移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>信息调换</title>
<script src="http://www.mamicode.com/js/jquery-3.1.1.min.js"></script>
<style>
body{
margin: 0px;
border: 0px;
}
.one{
width: 200px;
height: 500px;
border: 1px solid pink;
float: left;
}
.two{
width: 200px;
height: 500px;
border: 1px solid pink;
float: left;
}
.b{
background-color: dodgerblue;
}
</style>
</head>
<body>
<div>
<div class="one" >
<p>张三</p>
<p>李四</p>
</div>
<div class="two">
</div>
</div>
<button>左移</button>
<button>右移</button>
<script>
$(function () {
//记录上一次选中的对象
var select;
$("p").click(function () {
if(select!=undefined){
//移除上一次选中对象的样式
select.removeClass("b");
//记录下这次选中的对象
select = $(this);
//给这次对象添加样式
select.addClass("b")
}else{//首次选中添加样式
//添加样式
$(this).addClass("b");
//记录这次选中的对象
select =$(this);
}
var info
//右移
$("button").eq(1).click(function () {
info = select.detach();
//detach() 方法移除被选元素,该方法会保留移除元素的副本，允许它们在以后被重新插入。
$(".two").append(info);
//append() 方法在被选元素的结尾插入指定内容
})
//左移
$("button").eq(0).click(function () {
info = select.detach();
$(".one").append(info);
})
})
})
</script>
</body>
</html>
信息调换
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。