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

Пользователь

от josie , в категории: JavaScript , 8 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от sylvester , 7 месяцев назад

@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" добавляется или удаляется из элемента, выводится соответствующее сообщение в консоль.