MutationObserver в нодлисте

У меня есть HTML с четырьмя разделами:

<section class="section"><div class="button"></div></div>
<section class="section"><div class="button"></div></div>
<section class="section"><div class="button"></div></div>
<section class="section"><div class="button"></div></div>

Внутри этого раздела есть класс div.button, когда пользователь щелкает по нему, раздел расширяется, покрывая всю страницу (все элементы внутри становятся видимыми), и получает класс is-extended

Теперь я установил MutationObserver на этих узлах (с классом 'section'):

utilities.js

class Observer{
  constructor(targetClass,buttonHandler){
    this.targetClass = targetClass;
  }
  initObserver(){
    let self = this;
    const observer = new MutationObserver(function(mutations){
        mutations.forEach(function(mutation){
          if(mutation.target.classList.contains(self.targetClass)){
          let menuButton = Array.from(mutation.target.children).find(function(el){
            return el.classList.contains('menu-heading')
          })
          self.buttonHandler.disable(menuButton)
          console.log(menuButton)
      }
      else if(!mutation.target.classList.contains(self.targetClass)){
        let menuButton = Array.from(mutation.target.children).find(function(el){
          return el.classList.contains('menu-heading')
        })
        self.buttonHandler.enable(menuButton)

      }
        })
      }
      return observer
  }
}

main.js

    const observer = new utilities.Observer(expandedClass).initObserver()
const sections = Array.from(document.querySelectorAll('.section'));

document.addEventListener('DOMContentLoaded',function(){
  sections.forEach(function(section){
    observer.observe(section,{attributes:true})
  })
})

Я новичок в мутации, наблюдаю API, это может быть полезным? даже с точки зрения производительности (вместо использования addEventListener на клик и т. д.)

Спасибо

РЕДАКТИРОВАТЬ Я обновляю код, а сейчас я хочу, чтобы, если в разделе был расширен класс, для дочерней кнопки (с классом.menu-heading) для указателя стиля css было установлено значение none, для auto, если у него нет целевого класса. функция enable из класса buttonhandler делает свою работу

0 ответов

Другие вопросы по тегам