JS vanilla：當子元素更改其 class 時，如何將 class 添加到父元素？

Question

當孩子更改其 class 時，我想將背景更改為父 div：

我的結構：

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

我的頁面使用 gsap/scroll-trigger，它在觸發的子元素上使用toggleClass:'active'滾動時可以正常工作

• 當 child-1 激活 class 時，我想向父級添加一個 class “bg-primary”；
• 當 child-2 激活 class 時，我想向父級添加一個 class “bg-green”；

我在js文件中的嘗試：

var parent = document.querySelector('.parent');
var child1 = document.querySelector('.child-1');
var child2 = document.querySelector('.child-2');


if(child1.classList.contains('active')){
     parent.classList.add('bg-primary');
}

if(child2.classList.contains('active')){
     parent.classList.add('bg-green');
}

我的代碼不起作用，您有正確編寫代碼的建議嗎？ 謝謝你們。

Answer 1

它可能會失敗，因為 JS 無法通過 class 選擇器找到元素。 這是因為您缺少 div 的 class 的結尾分號。您應該將其更改為：

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>