选择球队(例题)
Posted By_The_Way
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了选择球队(例题)相关的知识,希望对你有一定的参考价值。
<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");
$(".llist").attr("xz",0);
//改变选中项的背景颜色
$(this).css("background-color","red");
$(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>";
$("#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>
以上是关于选择球队(例题)的主要内容,如果未能解决你的问题,请参考以下文章
Datagridview Control键+鼠标点击取消选中行
Javascript中,当鼠标点击选中某个文本输入框时,该文本框可以响应啥事件