编辑：选择多个类然后为每个选择类

Question

我找到了一种方法来完成这项工作，但我在考虑是否有更好的方法。我试图仅通过 classes 对 div 进行更改。

我正在尝试通过单击 1 次来切换 4 class。

我抓取按钮的 class，然后添加点击 "add event listener"，我使用 querySelector all 抓取所有 4 个 classes 并分配给一个名为 slide 的变量。

 const slide = document.querySelectorAll( 
'.header__btn, .wrap__content, .content__aside, .nav'
);

我知道 querySelector 通过从上到下阅读 HTML 来按顺序抓取它们。我只选择永远不会改变的元素

我想为每个元素切换一个 class 列表，最好的方法是什么？？？

我正在使用：

slide[0].classList.toggle('header__btn--animate');
slide[1].classList.toggle('wrap__content--slide');
slide[2].classList.toggle('content__aside--slide');
slide[3].classList.toggle('nav--slide');

他们同时切换 classes 这很好，我希望他们这样做。

有没有更好的方法。

谢谢

Answer 1

将 classes 移动到 [class 的数组中进行查找，class 进行切换]。用 Array.forEach() 迭代数组。使用 document.querySelectorAll() 获取此 class 的所有项目。使用 NodeList.forEach() 迭代项目，并为每个项目切换其各自的 class.

const classes = [['.header__btn', 'header__btn--animate'], ['.wrap__content', 'wrap__content--slide'], ['.content__aside', 'content__aside--slide'], ['.nav', 'nav--slide']]

btn.addEventListener('click', () => {
  classes.forEach(([cls, clsToggle]) => 
    document.querySelectorAll(cls)
      .forEach(el => el.classList.toggle(clsToggle))
  )
})

编辑：选择多个类然后为每个选择类

EDIT: Selecting Multiple Classes then toggle classes for each of them

javascript

arrays

class

toggle

编辑：选择多个 类 然后为每个选择 类

EDIT: Selecting Multiple Classes then toggle classes for each of them

javascript

arrays

class

toggle

编辑：选择多个类然后为每个选择类