Escuchar el cambio de clase en jquery

Question

¿Hay alguna manera en jquery de escuchar un cambio en la clase de un nodo y luego tomar alguna medida al respecto si la clase cambia a una clase específica? Específicamente, estoy usando el plugin de pestañas de herramientas de jquery con la presentación de diapositivas y, a medida que se está reproduciendo la presentación de diapositivas, necesito poder detectar cuándo el foco está en una pestaña/ancla concreta para que pueda mostrar un div específico.

En mi ejemplo específico, necesito saber cuando:

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

cambios a la siguiente con la clase "actual" ha añadido:

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

Entonces desea mostrar un div en ese momento.

Gracias!

Answer 1

Éstos son algunos otros hallazgos que podrían proporcionar una solución:

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

Y como se sugirió en el # 2, por qué no hacer current una clase que se agrega, en lugar de una ID, y tiene el siguiente CSS manejar la acción mostrar/ocultar.

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

posible que también vale la pena mirar en .on() in jquery.

Answer 2

Con algo como esto tienes esencialmente dos opciones, devoluciones de llamada o sondeo.

Dado que posiblemente no se pueda activar un evento cuando el DOM muta de esta manera (confiablemente en todas las plataformas) puede que tenga que recurrir a la interrogación. Para ser un poco más amable al respecto, podrías intentar usar la API requestAnimationFrame en lugar de simplemente usar algo como setInterval de forma nativa.

Tomando el enfoque más básico (es decir, utilizando setInterval y asumiendo jQuery) puede intentar algo como esto:

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

Puede enlazar el evento DOMSubtreeModified. Añado un ejemplo aquí:

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

Después de investigar esto, la mejor respuesta que he encontrado es este plugin jQuery dado en this SO answer donde une una función oyente ion en cualquier cambio de atributo de los elementos HTML