Question

我找到了使这项工作成功的方法，但是我在想是否有更好的方法。我试图仅通过类对div进行更改。

我正在尝试通过1次点击切换4个班级。

我抓取按钮的类，然后添加单击“添加事件侦听器”，同时使用该功能，我使用querySelector all抓取所有4个类并分配给名为slide的变量。

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

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

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

我正在使用：

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');

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

有没有更好的方法呢？

谢谢

Answer 1

将类移动到[要查找的类，要切换的类]的数组。用Array.forEach()迭代数组。使用document.querySelectorAll()获取该课程的所有项目。使用NodeList.forEach()迭代项目，并为每个项目切换其各自的类。

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))
  )
})

编辑：选择多个类别，然后为每个类别切换类别

1 个答案: