Question

    const addActiveClass = () => {

    if( isInViewport(section) ) {

      section.classList.add('active-section');

      // How to remove the 'active-section' from other sections

    }

  }

}

应该编写什么代码才能从其他部分删除活动类？在jQuery中这可能很容易，但是纯js呢？

Answer 1

您需要首先用active-section遍历具有document.querySelectorAll(".active-section")类的所有元素，然后使用classList.remove()。然后，在所有元素都删除了该类之后，将其重新添加到有问题的当前元素中。

遵循以下原则：

const addActiveClass = () => {

  if( isInViewport(section) ) {
    // Loop over all the elements that are active
    document.querySelectorAll(".active-section").forEach(function(item){
      item.classList.remove('active-section'); // Remove the class
    });

    // Then add it to the current element
    section.classList.add('active-section');
  }
}

Answer 2

好吧，您的问题有点混乱，因为没有上下文。

最简单的方法是将一个数组或一个节点对象包含在所有节中。然后使用for循环遍历这些部分，以从所需的类中删除活动类？

例如，这里有3个部分。我希望每个部分在单击时都具有 section--active 类。但我也希望当时只有一个可以具有 section--active 类：

<div class="section section--1 section--active"></div>
<div class="section section--2"></div>
<div class="section section--3"></div>

在javascript中，我将它们放入节点对象（数组类型）中：

const sections = document.querySelectorAll('.section')

然后我可以将click事件绑定到每个部分：

sections.forEach(section => {
  section.addEventListener('click', () => {

    // I loop again to remove the 'section--active' from all others sections
    // To avoid confusion, I use 'el' as a name for each section in sections
    sections.forEach(el => el.classList.remove('section--active'))

    // Then I add the 'section--active' to the clicked element
    section.classList.add('section--active')
  })
})

如何从其他部分中删除活动班级

2 个答案: