如果另一個元素具有 class “活動”，則將 class 添加到正文

Question

我有一個名為.burger的按鈕，它被賦予了一個額外的 class ，稱為active的，在點擊時切換。

HTML

<div class="burger"></div>

JS

var element = document.querySelector('.burger');
element.onclick = function() {
  element.classList.toggle('visible');
}

這工作得很好，但我想做的是添加一個事件監聽器，只要.burger有 class active ，它就會給body標簽一個 class 的.disable-scroll 。

我將如何使用香草 javascript 實現這一目標？ 我正在學習，所以如果我的術語不太正確，我深表歉意。

Answer 1

不需要另一個event來監聽此button內部的變化，您只需在同一事件中切換主體 class

  var element = document.querySelector('.burger');
  var bodyEl = document.querySelector('body');

  element.onclick = function() {
     element.classList.toggle('visible');
     
     if (element.classList.contains("active"))
        bodyEl.classList.add('.disable-scroll');
     else bodyEl.classList.remove('.disable-scroll');
  }

或者您可以將其簡化為像這樣提到的@3limin4t0r

 var element = document.querySelector('.burger'); var bodyEl = document.querySelector('body'); element.onclick = function() { const isAdded = element.classList.toggle("visible"); bodyEl.classList.toggle("disable-scroll", isAdded); }

 .visible { background-color: green; }

 <button class="burger">Burger Button</button>

Answer 2

好吧，您可以使用MutationObserver來偵聽 DOM 更新並在特定主體具有正在添加的特定 class 時觸發回調，但我不建議您以這種方式使用 go...

這將使您的代碼更清晰，以找到您將.active添加到.burger的位置，然后將.disable-scroll添加到body

Answer 3

嘗試這個：

 element.classList.contains('active')? document.querySelector('body').classList.add('disable-scroll'): document.querySelector('body').classList.remove('disable-scroll')

這將檢查元素是否具有.active class 然后添加或刪除.disable-scroll

Answer 4

你可以像這樣使用MutationObserver ：

 var element = document.querySelector('.burger'); element.onclick = function () { element.classList.toggle('visible'); } const observer = new MutationObserver(({ target, attributeName }) => document.body.classList.toggle('disable-scroll', attributeName === 'class' && target.classList.contains('visible'))); observer.observe(element, { attributes: true });

 .visible { background-color: green; }

 <div class="active burger">Burger</div>

Answer 5

我的建議（使用箭頭 function和三元運算符）：

 var el = document.querySelector(".burger"), bodyEl = document.querySelector("body"); el.onclick = () => { el.classList.toggle("visible"), el.classList.contains("active")? bodyEl.classList.add(".disable-scroll"): bodyEl.classList.remove(".disable-scroll") };

 .visible { background-color: orange; }

 <button class="burger">Burger Button</button>