Posłuchaj zmiany klasy w jquery

Czy istnieje sposób w jquery, aby nasłuchiwać zmiany w klasie węzła, a następnie podjąć pewne działania, jeśli klasa zostanie zmieniona na konkretną klasę? W szczególności używam wtyczki narzędzi jquery z zakładkami z pokazem slajdów i podczas odtwarzania pokazu slajdów, muszę mieć możliwość wykrycia, kiedy fokus znajduje się na konkretnej karcie/zakotwiczeniu, dzięki czemu mogę odkryć konkretny element div.Posłuchaj zmiany klasy w jquery

W moim konkretnym przykładzie, muszę wiedzieć, kiedy:

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

zmian następujących z klasą „prąd”, dodał:

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

Następnie chcę odkryć div na które za chwilę.

Dzięki!

Źródło

2010-09-17 Snazawa

To [pytania] [1] odpowiedzi mogą pomóc. [1]: http://stackoverflow.com/questions/6034161/how-can-i-detect-when-an-html-elements-class-changes –

Oto kilka innych znalezisk, które mogłyby stanowić rozwiązanie:

I jak sugerowano w # 2, to dlaczego nie zrobić current się klasy, która jest dodawana, zamiast identyfikatora i mają następujące CSS do obsługi akcji pokaż/ukryj.

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

Może być również wart obejrzenia się z .on() in jquery.

Źródło

2012-02-12 14:28:23 JSuar

Google przyniósł mi tutaj. Spojrzałem na ".on()", ale nie było jasne, które zdarzenie może wywołać, gdy klasa zostanie dodana do elementu. Znajduję się w podobnej sytuacji, co OP, i trzeba wywołać, gdy klasa zostanie dodana, ale nie mogę powiązać z pierwotnym zdarzeniem kliknięcia, ponieważ wywołania wtyczki preventDefault w zdarzeniu kliknięcia. –

Minęło trochę czasu odkąd opublikowałem to pytanie i całkiem szczerze zapomniałem, jak sobie z tym poradziłem. Używanie CSS do ukrywania/odkrywania elementu div byłoby oczywistym rozwiązaniem, ale jestem prawie pewien, że musiałem mieć kilka dodatkowych rzeczy, które uniemożliwiły mi utrzymanie tego w tak prosty sposób. W każdym razie wybrałem rozwiązanie @jsuka, ponieważ zawierało pomocne linki. – Snazawa

Z czymś takim masz zasadniczo dwie opcje, połączenia zwrotne lub odpytywanie.

Ponieważ prawdopodobnie nie można uzyskać zdarzenia, które zostanie wywołane, gdy mutacja DOM będzie w ten sposób (niezawodnie na wszystkich platformach), może być konieczne korzystanie z odpytywania. Aby być trochę milszym w tej kwestii, możesz spróbować użyć api requestAnimationFrame, zamiast używać po prostu czegoś podobnego do setInterval.

Biorąc najbardziej podstawowe podejście (czyli przy użyciu setInterval i zakładając jQuery) można spróbować czegoś takiego:

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

Źródło

2013-07-22 20:22:41

Można powiązać zdarzenie DOMSubtreeModified. Dodam tu przykład:

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/

Źródło

2013-07-26 12:40:00 Wood

Po zbadaniu tego, najlepszą odpowiedzią znalazłem jest to plugin jQuery podana w this SO answer, gdzie wiąże funkcję słuchacza jon na każdej zmianie atrybutów elementów HTML

Źródło

2014-09-04 08:58:40 hobailey

Posłuchaj zmiany klasy w jquery

Odpowiedz

Powiązane problemy