Écoute du changement de classe dans jquery

Question

Existe-t-il un moyen pour jquery d'écouter une modification de la classe d'un nœud et de prendre des mesures si la classe change pour une classe spécifique? Plus précisément, j'utilise le plugin jquery tools tabs avec le diaporama et pendant que le diaporama est en cours de lecture, je dois être capable de détecter quand le focus est sur un onglet/ancre particulier afin que je puisse afficher un div spécifique.

Dans mon exemple précis, je dois savoir quand:

<li><a class="nav-video" id="nav-video-video7" href="#video7-video">Video Link 7</a></li> 

changements à ce qui suit avec la classe ajouté « courant »:

<li><a class="nav-video" id="nav-video-video7 current" href="#video7-video">Video Link 7</a></li> 

Ensuite, je veux afficher une div à ce moment.

Merci!

Answer 1

Voici quelques autres découvertes qui pourraient fournir une solution:

1. Most efficient method of detecting/monitoring DOM changes?
2. How can I detect when an HTML element’s class changes?
3. Monitoring DOM Changes in JQuery

Et comme il a été suggéré dans # 2, pourquoi ne pas faire current une La classe qui est ajoutée, plutôt qu'un ID, et le CSS suivant gèrent l'action show/hide.

<style type='text/css> 
    .current{display:inline;} 
    .notCurrent{display:none;} 
</style> 

pourrait aussi valoir la peine de se pencher sur .on() in jquery.

Answer 2

Avec quelque chose comme ça, vous avez essentiellement deux options, les rappels ou l'interrogation.

Étant donné que vous ne pouvez pas déclencher un événement lorsque le DOM mute de cette manière (de manière fiable sur toutes les plates-formes), vous devrez peut-être recourir à l'interrogation. Pour être un peu plus gentil à ce sujet, vous pouvez essayer d'utiliser l'API requestAnimationFrame plutôt que d'utiliser nativement quelque chose comme setInterval.

Prendre l'approche la plus fondamentale (à savoir en utilisant setInterval et en supposant jQuery), vous pouvez essayer quelque chose comme ceci:

var current_poll_interval; 
function startCurrentPolling() { 
    current_poll_interval = setInterval(currentPoll, 100); 
} 
function currentPoll() { 
    if ($('#nav-video-7').hasClass('current')) { 
    // ... whatever you want in here ... 
    stopCurrentPolling(); 
    } 
} 
function stopCurrentPolling() { 
    clearInterval(current_poll_interval); 
} 

Answer 3

Vous pouvez lier l'événement DOMSubtreeModified. J'ajoute un exemple ici:

HTML

<div id="mutable" style="width:50px;height:50px;">sjdfhksfh<div> 
<div> 
    <button id="changeClass">Change Class</button> 
</div> 

JavaScript

$(document).ready(function() { 
    $('#changeClass').click(function() { 
    $('#mutable').addClass("red"); 
    }); 

    $('#mutable').bind('DOMSubtreeModified', function(e) { 
     alert('class changed'); 
    }); 
}); 

http://jsfiddle.net/hnCxK/13/

Answer 4

Après avoir étudié cela, la meilleure réponse que j'ai trouvé est ce plugin jQuery donné en this SO answer où il lie une fonction d'écoute ion sur tout changement d'attribut d'éléments HTML