看上去很简单

       前几天写了几行jquery,首先声明本人js水平为alert级别,很简单的hover添加样式,移出样式,代码如下:

-----------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        .customer_left ul { list-style-type: none; line-height: 20px; margin: 5px 0; }
   .customer_left li {font-size: 13px; padding: 4px; text-indent: 15px;}
   .customer_left li.current{ background:green no-repeat 5px top; color:White; cursor:pointer; }
   .customer_left .last { border-bottom: none; }       
    </style>
<title>简单hover</title>
       <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
       
</head>
<body>
<div class="customer_left">
<div class="left_common trans_manage ">
    <ul class="ulself">
        <li id="css_sel"  class="current">我</li>
        <li class="">你</li>
        <li class="">他</li>
    </ul>   
</div>
  </div>
<script type="text/javascript"> 
    $(".ulself li").not(".current").hover(
     function () {
         $(this).addClass("current");
     },
     function () {
         $(this).removeClass("current");
     }).click(function () {
            $(".ulself li").filter(".current").removeClass("current");
            $(this).addClass("current");
     });
</script>   
</body>
</html>

如上所示,链接个jquery的库文件。本来的想法是鼠标移入移出时,列表的样式动态地添加和删除,这块没什么问题,但是当点击到某一行后鼠标一经移开,样式又没?怎么和我想的不一样呢,firebug下,我把断点加在click函数的第一行,奇怪的事情发生了,竟然可以了,但是去掉断点后又恢复原状?几经折腾没什么结果,去请教同事,经同事说才知犯了几个错误:

          1)不加断点时,当鼠标点击到某一行后,鼠标一离开会马上执行$(this).removeClass("current"),这个是我之前比较纠结的地方,我老想的是我已经给你加了current样式了,$(".ulself li").not(".current")这个集合怎么还是会选到你?其实$(".ulself li").not(".current")这个只执行了一次。js事件机制分为 a)构造集合b)遍历集合绑定事件c)鼠标等触发事件,执行事件,其中步骤a,b只执行了一次,一旦事件被触发,步骤c就将被执行。页面初始化时样式是在 “我”上,那“你”和“他”都绑定了hover事件,所以鼠标点了“你”或“他”以后一旦离开,虽然已经有了current样式,但是还是会执行hover事件。

         2)加断点后,为什么会出现不同的结果?这个涉及到线程。正常的执行顺序是hover中的removeClass和click中的addClass通过时间片轮转执行,加断点后addClass被挂起,程序只能是先去执行removClass,然后执行addClass,所以点击后只要鼠标不在current样式的那一行上面晃,current样式就会保留。那我如果在removeClass那一行也加断点呢,“调试不能模仿多线程”,同事如是说。。。

后来同事改了下,分成了两个状态“选中”和“当前”,得到想要的效果。

原文地址:https://www.cnblogs.com/twinkle/p/3442141.html