Как повесить MutationObserver на мой скрипт?

Question

[Valery23]

Есть код (приведу ниже), он скрывает div, если его числовое значение меньше 1. Подскажите пожалуйста, как применить MutationObserver, что бы в результате он реагировал на изменения числового значения (без перезагрузки страницы), и в случае смены значения на 0 мой скрипт срабатывал?

let span = document.querySelectorAll(".yith-wcwl-items-count");
for (let i = 0; i < span.length; i++) {
  let isEmpty = Number( span[i].textContent ) === 0;
  span[i].classList[ isEmpty ? "add" : "remove" ]("hidden");
}

Answer 1

[Чипекве]

const target = document.querySelector(''); //наблюдаемый элемент

const observer = new MutationObserver(mutationsList => {
  mutationsList.forEach(({ target }) => {
    if (!target.classList.contains('yith-wcwl-items-count')) return;
    const isEmpty = target.textContent.trim() === '0';
    target.classList.toggle('hidden', isEmpty);
  })
});

observer.observe(target, { childList: true, characterData: true });

Comments

[Valery23]

наблюдаемый элемент и есть yith-wcwl-items-count. Вообще код работает, только один косяк. Когда обновляю страницу, и в диве стоит 0 - Hidden отсутствует

[Чипекве]

Судя по перебору в вопросе, элементов 'yith-wcwl-items-count' несколько. Поэтому надо вешать обработчик на элемент выше по дереву, а не на все 'yith-wcwl-items-count'.

При первой загрузке элементы 'yith-wcwl-items-count' могут сразу быть странице. То есть не будет мутаций, которые отобразятся в MutationObserver. Тогда нужно при загрузке проверять элементы отдельно.

[Valery23]

О госпади...

[Чипекве]

Разумеется, поэтому проще и логичней добавить действия в функцию, которая меняет значение этого счётчика.

[Valery23]

Вы про вот эту? Я даже не понимаю откуда ноги растут (

jQuery( function( $ ) {
          $( document ).on( 'added_to_wishlist removed_from_wishlist', function() {
            $.get( yith_wcwl_l10n.ajax_url, {
              action: 'yith_wcwl_update_wishlist_count'
            }, function( data ) {
              $('.yith-wcwl-items-count').html( data.count );
            } );
          } );
        } );

[Чипекве]

Я так понимаю, счётчик с нулем сразу появляется при загрузке страницы. А этот код (как и обсервер) будет менять класс только при изменении счётчика. Поэтому в любом случае после загрузки страницы надо делать отдельную проверку, если нужно скрыть все счётчики с нулем. А вместо обсервера добавить изменение класса и в эту функцию

$('.yith-wcwl-items-count').html( data.count ).toggleClass('hidden', data.count === 0)

[Valery23]

То есть код в "ответе" надо переписывать?

[Чипекве]

Этот ответ на вопрос про MutationObserver.

Для изменения класса сразу после загрузки страницы нужно добавлять соответствующую проверку проверку, т.к. MutationObserver тут не поможет.

Answer 2

[WebEagle]

let parentObject = document.querySelector(/* селектор для родительского элемента, можно body*/);
let span = document.querySelectorAll(".yith-wcwl-items-count");
const config = {
    attributes: true,
    childList: true,
    subtree: true
};

// Колбэк-функция при срабатывании мутации
const callback = function(mutationsList, observer) {
    for (let i = 0; i < span.length; i++) {
        let isEmpty = Number( span[i].textContent ) === 0;
        span[i].classList[ isEmpty ? "add" : "remove" ]("hidden");
    }
};

// Создаём экземпляр наблюдателя с указанной функцией колбэка
const observer = new MutationObserver(callback);

// Начинаем наблюдение за настроенными изменениями целевого элемента
observer.observe(parentObject , config);

Как-то так, но лучше на событие изменения в элементе. или там кто этот ноль подставляет

Comments

[Valery23]

К сожалению теперь не скрывает даже после перезагрузки страницы (

[WebEagle]

Ну, нужно подебажить.

let span = document.querySelectorAll(".yith-wcwl-items-count");

спаны нужно перезапрашивать. я думаю
перед циклом в debugger;

[Valery23]

Там страница даже виснет. Не загружается и просит или закрыть или подождать