Heim > Artikel > Web-Frontend > Wie füge ich jedem Li in JQuery ein Mouseover-Ereignis hinzu?
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){ $('#right .item').hide().eq(int).show(); $('#left li').removeClass('current').eq(int).addClass('current'); }
Wir müssen Ereignisse zur Liste auf der linken Seite hinzufügen
$('#left li').bind({ 'mouseover' : function(){ //获取当前元素的索引值 int = $(this).index(); //执行函数,这里会显示右侧的第一个div元素 divShow(int); }, 'mouseout' : function(){ //鼠标划开时的操作 //int = 0; //divShow(int); } });
Das Gleiche gilt für die Schaltflächen an der Seite
//上翻 $('#prev').bind({ 'click' : function(){ //这里要使用判断 if(int <= 0){ //这里的个数可以拿到外面定义; int = ($('#right .item').length-1); }else{ int = (int-1); }; int = int; } }); //下翻 $('#next').bind({ 'click' : function(){ //这里要使用判断 if(int >= ($('#right .item').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!