html
<div class="container clearfix">
<div class="left">
<h5>内科</h5>
<ul>
<li>内科</li>
<li>心血管内科</li>
<li>内分泌内科</li>
</ul>
<h5>外科</h5>
<ul>
<li>外科</li>
<li>眼科</li>
<li>口腔科</li>
<li>耳科</li>
</ul>
<h5>儿科</h5>
<ul>
<li>儿科</li>
<li>新生儿科</li>
<li>小二普外科</li>
<li>中医保健科</li>
<li>中医儿科</li>
</ul>
<h5>全科</h5>
<ul>
<li>全科</li>
</ul>
</div>
<div class="right">
</div>
<p></p>
js
$(function(){
/*条件：1、点击每个li给当前的添加背景颜色，并把它添加到右边的盒子里；
2、只能添加10个，超过10个则不能继续添加;
3、同一个li不能重复添加;*/
var arr=[]
//添加数据
$("ul").on("click","li",function(){
/*var arr=[]*/ //不能局部定义这个数组，因为我们定义这个数组是一个空数组，当每次触发这个click事件时，这个数组都会重新置空，所以我们想要知道数组中已存在什么值是不可能的，每一次触发这个事件它都空的。
var $_this=$(this),
len;
if(arr.length<10){
if($.inArray($_this.text(),arr) ==-1 ){//如果这个左边的文本在数组中不存在，则就把它追加到数组中
$_this.addClass("active");
arr.push($_this.text());
len=arr[arr.length-1];//添加的是数组中的最后一项
$(".right").append('<ul><li>'+len+'</li></ul>');
}else{
return;
}
}else{
$("p").text("已超出上线，最多只能添加10个");
}
//删除数据
/*1、删除右边li的同时，数组中相应的也要删除，同时左侧的响应的li的背景颜色也要删除;
2、再次添加被删除的元素时还可以再添加;*/
$(".right ul").on("click","li",function(){
$("p").text("");
var $_right_this=$(this);
$_right_this.remove();
$.each(arr,function(k,v){
if($_right_this.text()==v){
arr.splice(k,1);//删除数组中与右边文本相同的那一项
$_this.removeClass("active");//相应的删除左边项的背景颜色
}
})
})
});
})
