Heim  >  Artikel  >  Web-Frontend  >  Wie füge ich jedem Li in JQuery ein Mouseover-Ereignis hinzu?

Wie füge ich jedem Li in JQuery ein Mouseover-Ereignis hinzu?

黄舟
黄舟Original
2017-06-28 13:39:353979Durchsuche

jquery kann eine Sammlung von Tags über einen Selektor auswählen. Zeigen Sie dann über $(this) auf das aktuelle Objekt.
$("#ul li") Dies kann alle Li unter der ID ul abrufen. Wenn die Maus über ein bestimmtes Li fährt, wird $(this) verwendet, um anzuzeigen, dass das aktuelle Li-Objekt in Betrieb ist.
Das Hinzufügen eines Mouseovers zu jedem Li kann so verstanden werden, dass jedes Li das Mouseover--Ereignis auslöst.
Zum Beispiel:

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

Dies sollte ein einfacher Schiebetüreffekt sein.

Die Struktur von HTML ähnelt wahrscheinlich Ihrer, mit einer Liste auf der linken Seite und einer Div-Gruppe auf der rechten Seite.

Tatsächlich müssen Sie nur verstehen, dass die Liste links und die Div-Gruppe rechts beide Indexwerte haben. Dann steuern Sie es einfach über eine Variable, sodass diese Variable für die Liste links und die Schaltfläche rechts verwendet werden kann.

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

Wir müssen Ereignisse zur Liste auf der linken Seite hinzufügen

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

Das Gleiche gilt für die Schaltflächen an der Seite

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

Wenn Sie Wenn Sie planen, die Maus zu verlassen, wenn alle initialisiert sind, müssen Sie nur die Indexvariable int im Mouseout-Ereignis jeder Schaltfläche auf 0 setzen.

Das obige ist der detaillierte Inhalt vonWie füge ich jedem Li in JQuery ein Mouseover-Ereignis hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn