Слушайте изменения класса в JQuery

Question

Есть ли способ в jquery прослушивать изменения в классе узла и затем предпринимать какие-то действия над ним, если класс меняется на определенный класс? В частности, я использую плагин jquery tools tabs со слайд-шоу, и во время воспроизведения слайд-шоу мне нужно уметь определять, когда фокус находится на конкретной вкладке / привязке, чтобы я мог отобразить определенный div.

В моем конкретном примере мне нужно знать, когда:

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

изменяется на следующее с добавленным классом "current":

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

Тогда я хочу показать div в этот момент.

Спасибо!

Answer 1

Вы можете связать событие DOMSubtreeModified. Я добавляю пример здесь:

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mutable" style="width:50px;height:50px;">sjdfhksfh
  <div>
    <div>
      <button id="changeClass">Change Class</button>
    </div>

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

Answer 2

Вот некоторые другие находки, которые могут дать решение:

1. Самый эффективный метод обнаружения / мониторинга изменений DOM?
2. Как можноЯ обнаруживаю, когда изменяется класс элемента HTML?
3. Отслеживание изменений DOM в JQuery

И, как это было предложено в # 2, почему бы не сделатьcurrent добавляемый класс, а не ID и имеющий следующий CSS-код, обрабатывающий действие show / hide.

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

Может быть, стоит взглянуть на .on ()в jquery .

Answer 3

Я знаю, что это старый, но в принятом ответе используется DOMSubtreeModified, который теперь устарел для MutationObserver.Вот пример использования jQuery (протестируйте здесь ):

// Select the node that will be observed for mutations
let targetNode = $('#some-id');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: false, subtree: false, attributeFilter: ['class'] };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.attributeName === "class") {
            var classList = mutation.target.className;
            // Do something here with class you're expecting
            if(/red/.exec(classList).length > 0) {
                console.log('Found match');
            }
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode[0], config);

// Later, you can stop observing
observer.disconnect();

Answer 4

С чем-то подобным у вас есть, по сути, две опции: обратные вызовы или опрос.

Поскольку вы, возможно, не можете получить событие, которое будет инициировано, когда DOM мутирует таким образом (надежно на всех платформах), возможно, вам придется прибегнуть к опросу. Чтобы быть немного лучше, вы можете попробовать использовать api requestAnimationFrame, а не просто использовать что-то вроде setInterval.

Используя самый базовый подход (т.е. используя setInterval и предполагая jQuery), вы можете попробовать что-то вроде этого:

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