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

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

от dan_farrell , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от leila.dickinson , год назад

@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(), и выполняем соответствующий код в зависимости от того, добавлен ли класс или удален.

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

от jorge , 3 месяца назад

@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 не поддерживается в старых версиях браузеров, поэтому рекомендуется проверить его поддержку перед использованием.