How to add mouseover event to each li in jquery?-JS Tutorial-php.cn

How to add mouseover event to each li in jquery?

黄舟

Release： 2017-06-28 13:39:35

Original

4005 people have browsed it

jqueryYou can select a collection of tags through a selector. Then point to the current object through $(this).
$("#ul li") This can get all the li under id. When the mouse passes over a certain li, $(this) is used to indicate that the current li object is operating.
Adding mouseover to each li can be understood as each li triggering the mouseover event.
For example:

<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
$("#ul li").mouseover(function(){//jquery的mouseover事件
alert($(this).index());//弹出每个li的的位置
//这样就能实现每个li都绑定mouseover事件
});
</script>

Copy after login

This should be a simple sliding door effect.

The structure of HTML is probably like yours, with a list on the left and a div group on the right.

In fact, you only need to understand that the list on the left and the div group on the right both have index values. Then just control it through a variable, so that this variable can be used for the list on the left and the button on the right.

var int = 0; //初始化一个变量
  
//定义一个函数，用来隐藏显示右侧的div和控制左侧的列表
function divShow(int){
    $(&#39;#right .item&#39;).hide().eq(int).show();
    $(&#39;#left li&#39;).removeClass(&#39;current&#39;).eq(int).addClass(&#39;current&#39;);
}

Copy after login

We need to add events to the list on the left;

$(&#39;#left li&#39;).bind({
    &#39;mouseover&#39; : function(){
        //获取当前元素的索引值
        int = $(this).index();
          
        //执行函数,这里会显示右侧的第一个div元素
        divShow(int);
    },
    &#39;mouseout&#39; : function(){
        //鼠标划开时的操作
        //int = 0;
        //divShow(int);
    }
});

Copy after login

The same goes for the buttons on the side

//上翻
$(&#39;#prev&#39;).bind({
    &#39;click&#39; : function(){
        //这里要使用判断
        if(int <= 0){
            //这里的个数可以拿到外面定义；
            int = ($(&#39;#right .item&#39;).length-1);
        }else{
            int = (int-1);
        };
        int = int;
    }
});
  
//下翻
$(&#39;#next&#39;).bind({
    &#39;click&#39; : function(){
        //这里要使用判断
        if(int >= ($(&#39;#right .item&#39;).length-1)){
            //这里的个数可以拿到外面定义；
            int = 0;
        }else{
            int = (int+1);
        };
        int = int;
    }
});

Copy after login

If you plan to initialize when the mouse leaves, then you Just set the int index variable to 0 in the mouseout event of each button.

The above is the detailed content of How to add mouseover event to each li in jquery?. For more information, please follow other related articles on the PHP Chinese website!