js点击左边列表内容添加到右边列表
文章描述:
jQuery点击把当前元素条件到另一个模块里面
<div class="container">
<div class="copy-list fl">
<ul id="mainUl">
<li class="list-group-item">英雄联盟</li>
<li class="list-group-item">绝地求生</li>
<li class="list-group-item">地下城与勇士</li>
</ul>
</div>
<div class="copy-res fl">
<ul id="showUl">
</ul>
</div>
</div>
*{ margin:0; padding:0;}
html,body{ font-family: Arial,Helvetica,Verdana,sans-serif; font-weight: 400; font-size: 14px; background-color: #f5f5f5; color: #333;}
.fl{float:left;}
.fr{float:right;}
.copy-list{ margin:40px 0; width:300px; background:#fff; padding:50px 30px; min-height:600px;}
.copy-list ul li{ margin:10px 0; background:#00AAEE; color:#fff;}
.copy-res{margin:40px 30px; width:300px; background:#fff; padding:50px 30px; min-height:600px;}
.copy-res ul li{ margin:10px 0; background:#00AAEE; color:#fff;}
$('#mainUl').children("li").on('click',function(){
//console.log("000");
var clone = $(this).clone();
//console.log(clone);
//$(clone).clone().appendTo("#showUl");
clone.append("<span style='color:#fff;padding:0 10px;float: right;'>X</span>").find("span").click(function(){
console.log("1234");
$(this).parent().remove("li");
});
$("#showUl").append(clone);
});
发布时间:2022/10/13
发表评论