Combinare funzioni jquery – on () hover / mouseenter / mouseleave

Ho una serie di elementi (li chiamiamo ‘.my-elementi’) – alcuni caricano su documenti pronti, mentre altri vengono caricati in seguito tramite uno script di impaginazione.

Vorrei impostare una variabile in base al fatto che il mouse si trovi sopra questi elementi. Il codice sotto funziona, ma ho il sospetto che ci sia un modo migliore … Posso farlo così devo solo fare riferimento al DOM una volta?

$(document).on('mouseenter','.my-elements', function(){ mouse_is_inside = true; }); $(document).on('mouseleave','.my-elements', function(){ mouse_is_inside = false; }); 

Grazie!

È ansible eseguire il binding a entrambi e controllare l’ event.type :

 $(document).on('mouseenter mouseleave', '.my-elements', function (ev) { mouse_is_inside = ev.type === 'mouseenter'; }); 

Oppure, se vuoi tenerli separati, .on ha un’altra syntax che accetta una mappa degli eventi:

 $(document).on({ mouseenter: function () { mouse_is_inside = true; }, mouseleave: function () { mouse_is_inside = false; } }, '.my-elements'); 

Controlla jover hQuery che è lo stesso di:

 $(selector).mouseenter(handlerIn).mouseleave(handlerOut); 

AGGIORNAMENTO: ho appena realizzato che è necessario mantenere gli eventi tramite il metodo on (). In tal caso, puoi utilizzare una mappa degli eventi in questo modo:

 .on({ mouseenter: function() { console.log('enter'); }, mouseleave: function() { console.log('bye!'); } }) 

Quasi tutti i metodi jQuery restituiscono oggetti, quindi puoi concatenarli:

 $(document).on('mouseenter','.my-elements', function(){ mouse_is_inside = true; }).on('mouseleave','.my-elements', function(){ mouse_is_inside = false; }); 

Puoi anche provare:

 $(".my-elements").hover(function(eIn) { // do work for mouse over }, function(eOut) { // do work for mouse out }); 

aggiornamento e correzione

ho capito che hai bisogno di un lock più dinamico, nel qual caso quello di Jonathan Lonowski o Derek Hunziker è perfetto

Per i principianti, puoi selezionare i tuoi elementi anziché il documento.

 $('.my-elements').on('mouseenter', function(){ mouse_is_inside = true; }); 

Potresti provare una notazione di collegamento come questa …

 $('.my-elements').on('mouseenter mouseleave', function(){ mouse_is_inside = !mouse_is_inside; }); 

Questo annullerà il valore ogni volta che il mouse entra o esce, il che dovrebbe mantenere la variabile mouse_is_inside impostata sul valore corretto.

 $('.my-elements').on('mouseenter mouseleave', function(event){ mouse_is_inside = event.type === 'mouseenter'; }); 

ma generalmente non è una buona idea avere una variabile globale che incide su uno stato di evento