Listen für Änderung der Klasse in Jquery

Question

Gibt es eine Möglichkeit in Jquery auf eine Änderung der Klasse eines Knotens zu hören und dann etwas zu tun, wenn die Klasse in eine bestimmte Klasse wechselt? Insbesondere verwende ich das jquery tools tools Plugin mit der Slideshow und während die Slideshow spielt, muss ich in der Lage sein zu erkennen, wenn der Fokus auf einem bestimmten Tab/Anker liegt, so dass ich ein bestimmtes div einblenden kann.

In meinem speziellen Beispiel, ich muss wissen, wann:

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

Änderungen an den folgenden mit der Klasse „aktuellen“ hinzugefügt:

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

Dann möchte ich, dass ein div sichtbar machen Moment.

Danke!

Answer 1

Einige andere Funde, die eine Lösung bieten könnte:

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

Und da es eine in vorgeschlagen wurde # 2, warum nicht current Klasse, die hinzugefügt wird, und nicht eine ID, und die folgende CSS-Anweisung behandelt die show/hide-Aktion.

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

könnte auch wert sein, in .on() in jquery zu suchen.

Answer 2

Mit so etwas haben Sie im Wesentlichen zwei Optionen, Callbacks oder Polling.

Da möglicherweise kein Ereignis ausgelöst werden kann, wenn das DOM auf diese Weise mutiert (zuverlässig über alle Plattformen hinweg), müssen Sie möglicherweise auf Abfragen zurückgreifen. Um ein bisschen netter zu sein, könnten Sie versuchen, den requestAnimationFrame api zu verwenden, anstatt nur etwas wie setInterval nativ zu verwenden.

Unter dem grundlegendsten Ansatz (das heißt mit setInterval und unter der Annahme, jQuery) Sie so etwas wie dies versuchen könnten:

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

Sie können das DOMSubtreeModified Ereignis binden. Ich füge hier ein Beispiel:

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

Danach die Erforschung, die beste Antwort, die ich gefunden habe, ist die jQuery-Plugin gegeben in this SO answer, wo es eine Listener-Funktion bindet Ionen bei jeder Attributänderung von HTML-Elementen