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>