<body>
<div id="a">
<div id="left">
<div class="llist">洛杉矶湖人</div>
<div class="llist">圣安东尼奥马刺</div>
<div class="llist">休斯顿火箭</div>
<div class="llist">芝加哥公牛</div>
</div>
<div id="middle">
<div id="one">></div>
<div id="all">>></div>
</div>
<div id="right"></div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
//鼠标点击选中事件
$(".llist").click(function(){
//清除还原所有项的样式
$(".llist").css("background-color","#63F");
//创建属性xz，为0，方便区分是否被选中
$(".llist").attr("xz",0);
//改变选中项的背景颜色
$(this).css("background-color","red");
//更改属性xz，为1，表示被选中
$(this).attr("xz",1);
});
//移动一项事件
$("#one").click(function(){
//将class为llist的所有项的内容存入变量list中
var list=$(".llist");
//对左侧DIV中的内容进行循环
for(var i=0;i<list.length;i++)
{
//判断选中项
if(list.eq(i).attr("xz")==1)
{
//将选中项的内容放入变量zhi中
var zhi = list.eq(i).text();
//对选中的值进行判断，在右侧DIV中是否存在
if(Has(zhi))
{
//如果不存在，则在右侧添加一项内容
var str="<div class='rlist'>"+zhi+"</div>";
//将得到的字符串内容添加到ID为right的div内
$("#right").append(str);
}
}
}
});
//移动全部事件
$("#all").click(function(){
//找到左侧的所有内容
var llist=$(".llist");
//对左侧内容进行循环判断
for(var i=0;i<llist.length;i++)
{
//将所有内容存入变量zhi中
var zhi = llist.eq(i).text();
//判断zhi里的内容在右侧是否已存在
if(Has(zhi))
{
//如果不存在就在右侧添加内容项
var str="<div class='rlist'>"+zhi+"</div>" ;
$("#right").append(str);
}
}
})
});
//封装一个判断选中的内容是否在右侧已经存在
function Has(zhi){
//定义变量rlist用来存放右侧已经存在的内容
var list=$(".rlist");
//定义一个bool型变量用来做判断
var cunzai=true;
//循环右侧已存在的所有内容
for(var i=0;i<list.length;i++)
{
//如果右侧的内容与选中的值重复
if(list.eq(i).text()==zhi)
{
//将变量cunzai更改为false
cunzai = false;
//跳出循环
break;
}
}
//返回到cunzai变量
return cunzai;
};
</script>