Comment ajouter un événement mouseover à chaque li dans jquery ?-js tutoriel-php.cn

Comment ajouter un événement mouseover à chaque li dans jquery ?

黄舟

Libérer： 2017-06-28 13:39:35

original

4011 Les gens l'ont consulté

jquery peut sélectionner une collection de balises via un sélecteur. Pointez ensuite sur l'objet actuel via $(this).
$("#ul li") Ceci peut obtenir tous les li sous l'identifiant ul Lorsque la souris passe sur un certain li, $(this) est utilisé pour indiquer que l'objet li actuel fonctionne.
L'ajout d'un survol de la souris à chaque li peut être compris comme chaque li déclenchant l'événement mouseover .
Par exemple :

<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>

Copier après la connexion

Cela devrait être un simple effet de porte coulissante.

La structure du HTML est probablement comme la vôtre, avec une liste à gauche et un groupe div à droite.

En fait, il vous suffit de comprendre que la liste de gauche et le groupe div de droite ont tous deux des valeurs d'index. Il suffit ensuite de le contrôler via une variable, afin que cette variable puisse être utilisée pour la liste de gauche et le bouton de droite.

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;);
}

Copier après la connexion

Nous devons ajouter des événements à la liste de gauche

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

Copier après la connexion

Il en va de même pour les boutons sur le côté

//上翻
$(&#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;
    }
});

Copier après la connexion

Si vous prévoyez de quitter la souris lorsque tous sont initialisés, il vous suffit alors de définir la variable d'index int sur 0 dans l'événement mouseout de chaque bouton.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!