选择球队(例题)

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中,当鼠标点击选中某个文本输入框时,该文本框可以响应啥事件

threejs加载3d模型 怎样控制鼠标点击选中某个模型

MFC动态创建的RadioButton点击不能选中,怎么解决

jquery表格中鼠标按下,选择单元格范围的事件

angular2 表格点击选中与鼠标悬浮