Höre auf den Klassenwechsel in jQuery

Gibt es eine Möglichkeit in jquery zu hören, für einen Wechsel auf einen Knoten der Klasse und dann nehmen Sie eine Aktion auf Sie, wenn Sie die Klasse ändern, um eine bestimmte Klasse? Speziell, ich verwende die jquery tools tabs plugin mit der slideshow und die Diashow ist zu spielen, ich muss in der Lage sein zu erkennen, wenn der Fokus auf einer bestimmten Registerkarte/Anker, so dass ich unhide ein bestimmtes div.

In meinem konkreten Beispiel, ich brauche, um zu 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 "current" Hinzugefügt:

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

Dann möchte ich einblenden eines div in diesem moment.

Dank!

InformationsquelleAutor der Frage Snazawa | 2010-09-17

  1. 2

    Hier sind einige weitere Funde, die vielleicht eine Lösung:

    1. Die meisten effiziente Methode zur Erkennung/überwachung DOM verpasst?
    2. Wie kann ich erkennen, wenn ein HTML-element die Klasse ändert?
    3. Überwachung von DOM-Änderungen in JQuery

    Und es wurde vorgeschlagen, in #2, warum nicht current eine Klasse Hinzugefügt wird, anstatt einer ID, und haben die folgenden CSS-Griff-Aktion einblenden/ausblenden werden.

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

    Könnte sich auch lohnen, es zu suchen in .auf() in jquery.

    InformationsquelleAutor der Antwort JSuar

  2. 21

    Können Sie binden die DOMSubtreeModified Veranstaltung. 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/

    InformationsquelleAutor der Antwort Wood

  3. 1

    Mit so etwas haben Sie im wesentlichen zwei Optionen, Rückrufe oder Abfragen.

    Da Sie möglicherweise nicht bekommen kann ein Ereignis ausgelöst werden, wenn das DOM mutiert auf diese Weise (zuverlässig über alle Plattformen) Sie können zurückgreifen, um polling. Ein bisschen netter über Sie, Sie könnten versuchen, mit der requestAnimationFrame-api und nicht nur mit so etwas wie setInterval nativ.

    Unter den basic-Ansatz (D. H. mit setInterval und vorausgesetzt, jQuery) Sie könnten versuchen, so etwas wie dieses:

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

    InformationsquelleAutor der Antwort pete otaqui

  4. 0

    Nach der recherche zu diesem, die beste Antwort, die ich gefunden habe, ist das jQuery-plugin in diese SO beantwortenwo es sich bindet einen listener-Funktion, auf jedes Attribut ändern von HTML-Elementen

    InformationsquelleAutor der Antwort hobailey

Schreibe einen Kommentar