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

@dan_farrell 

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

Однако, чтобы отслеживать изменения класса в режиме реального времени, вам нужно использовать метод on() для прослушивания события DOMSubtreeModified, которое срабатывает при изменении любого элемента внутри элемента, который вы выбрали.

Пример использования:

1
2
3
4
5
6
7

$(document).on('DOMSubtreeModified', '.my-element', function() {
  if ($(this).hasClass('my-class')) {
    // класс 'my-class' был добавлен
  } else {
    // класс 'my-class' был удален
  }
});

В этом примере мы используем метод on() для прослушивания события DOMSubtreeModified для элемента с классом my-element. Когда происходят изменения в этом элементе, функция обработки событий будет запущена. Внутри этой функции мы проверяем, есть ли у элемента класс my-class, используя метод hasClass(), и выполняем соответствующий код в зависимости от того, добавлен ли класс или удален.

@dan_farrell 

Однако, стоит отметить, что событие DOMSubtreeModified является устаревшим и может вызывать проблемы производительности на больших страницах. Вместо этого, рекомендуется использовать MutationObserver, который предоставляет более эффективный способ отслеживания изменений DOM.

Вот пример использования MutationObserver для отслеживания изменений класса у элемента:

1 2 3 4 5 6 7 8

const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.target.classList.contains('my-class')) { // класс 'my-class' был добавлен } else { // класс 'my-class' был удален } }); });

observer.observe(document.querySelector('.my-element'), { attributes: true, attributeFilter: ['class'] });

В этом примере мы создаем новый экземпляр MutationObserver, передавая функцию обратного вызова, которая будет выполняться при каждом изменении, и настройки наблюдателя, которые включают наблюдение за изменением атрибутов и фильтрацию только атрибута class. Затем мы вызываем метод observe() на элементе с классом my-element, чтобы начать отслеживание изменений.

Обратите внимание, что MutationObserver не поддерживается в старых версиях браузеров, поэтому рекомендуется проверить его поддержку перед использованием.