Как отследить изменения класса у элемента с jquery?

@josie 

Для отслеживания изменений класса у элемента с помощью jQuery можно использовать метод .hasClass() для проверки наличия класса у элемента и методы .addClass() и .removeClass() для добавления и удаления классов соответственно.

Чтобы отслеживать изменения класса, можно использовать метод .on() для привязки обработчика событий к элементу и события DOMSubtreeModified, DOMAttrModified, MutationObserver для отслеживания изменений DOM.

Например, следующий код отслеживает изменения класса у элемента с id "myElement":

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

$(document).ready(function() {
  var element = $('#myElement');
  var classToWatch = 'my-class';
  
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.attributeName === 'class' && element.hasClass(classToWatch)) {
        console.log('Class ' + classToWatch + ' added to element');
      } else if (mutation.attributeName === 'class' && !element.hasClass(classToWatch)) {
        console.log('Class ' + classToWatch + ' removed from element');
      }
    });
  });
  
  observer.observe(element[0], { attributes: true });
});

Этот код создает экземпляр MutationObserver, который отслеживает изменения атрибутов элемента myElement. Когда класс "my-class" добавляется или удаляется из элемента, выводится соответствующее сообщение в консоль.

@josie 

Примечание: Событие MutationObserver может не срабатывать на изменения классов через JavaScript, при использовании методов .addClass() и .removeClass(). Если требуется отслеживать изменения класса, произошедшие через JavaScript, можно использовать кастомные события.

Например, следующий код позволяет отслеживать добавление и удаление класса у элемента с помощью кастомных событий:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(document).ready(function() {
  var element = $('#myElement');
  var classToWatch = 'my-class';
  
  function checkClassChange() {
    if (element.hasClass(classToWatch)) {
      element.trigger('classAdded');
    } else {
      element.trigger('classRemoved');
    }
  }
  
  element.on('classAdded', function() {
    console.log('Class ' + classToWatch + ' added to element');
  });
  
  element.on('classRemoved', function() {
    console.log('Class ' + classToWatch + ' removed from element');
  });
  
  setInterval(checkClassChange, 100);
});

Этот код устанавливает обработчики событий classAdded и classRemoved, которые срабатывают при добавлении и удалении класса "my-class" соответственно. Функция checkClassChange() вызывается каждые 100 миллисекунд и проверяет, есть ли класс "my-class" у элемента. Если класс был добавлен или удален, соответствующее кастомное событие вызывается и выводится сообщение в консоль.

Помимо этого, можно также использовать методы MutationObserver и .hasClass() в сочетании для отслеживания изменений класса у элемента.