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 делает свою работу