Как отследить появление класса и поставить условие в MutationObserver?

Question

У меня стоит слайдер. Когда появляется слайд, то появляется класс active. Я хочу отследить это появление. Нашла MutationObserver, но не знаю как правильно поставить условие, что если появляется класс active у определенного id, то выполняется такой-то код( в моем случае блок с id="b1" виден). Если другой слайд появился, то другой блок тоже появился, а другие блоки не активны. Буду очень благодарна, если как-нибудь поможете.

        let variable1 = document.querySelector("#b-1049").getAttribute("class");
        let variable2 = document.querySelector("#b-1050").getAttribute("class");
        let variable3 = document.querySelector("##b-1051").getAttribute("class");
        let er =  document.getElementById("b1");
        let qw =  document.getElementById("b2");
        let ro =  document.getElementById("b3");

  let observer = new MutationObserver(function(mutations) {
              if (mutations.type === 'childList') {
                    if (variable1 == "carousel-item active") {
                        er.style.display = "block";
                        qw.style.display = "none";
                        ro.style.display = "none";
                    }
                }
        });

        observer.observe(variable2, {
            attributes: true,
            childList: true
        });

#b1 {
  display:none;
}
#b2 {
  display:none;
}
#b3 {
  display:none;
}

  <div class="carousel-item active" id="#b-1049"></div>
  <div class="carousel-item" id="#b-1050"></div>
  <div class="carousel-item" id="#b-1051"></div>

<div id="b1">Один</div> 
<div id="b2">Два</div> 
<div id="b3">Три</div>

Answer 1

Старайтесь не торопиться при написании кода - куча мелких опечаток приводит к часам поиска и отладки. Тщательно разберите и проанализируйте изменения в коде:

let variable1 = document.querySelector("#b-1049");
let variable2 = document.querySelector("#b-1050");
let variable3 = document.querySelector("#b-1051");

let er = document.getElementById("b1");
let qw = document.getElementById("b2");
let ro = document.getElementById("b3");

let observer = new MutationObserver(function(mutations) {
  console.log(`Сработал наблюдатель`);
  for (let mutation of mutations) {
    if (mutation.type === 'attributes') {
      console.log(`Изменились атрибуты`);
      if (variable1.getAttribute("class") == 'carousel-item active') {
        console.log(`Добавился нужный класс`);
        er.style.display = 'block';
        qw.style.display = 'none';
        ro.style.display = 'none';
      }
    }
  }
});

observer.observe(variable2, { attributes: true });

#b1 { display: none; background: #fa0; }
#b2 { display: none; }
#b3 { display: none; }

<div id="b-1049" class="carousel-item active"></div>
<div id="b-1050" class="carousel-item"></div>
<div id="b-1051" class="carousel-item"></div>

<div id="b1">Один</div>
<div id="b2">Два</div>
<div id="b3">Три</div>

<button onclick="document.querySelector('#b-1050').classList.add('active');">Добавить класс <i>active</i> для <b>div#b-1050</b></button>

БЛОГ НА HUSL

Как отследить появление класса и поставить условие в MutationObserver?

Ответы (1 шт):