JavaScript forEach循环实现按钮点击时双元素active类同步切换

完全不需要为cateringLine单独编写独立的forEach遍历逻辑，所有状态切换逻辑都可以在现有绑定按钮点击事件的forEach循环内完成，不会增加多余的代码复杂度。

现有实现的问题根源 #

你之前出现的cateringLine状态不同步问题，本质是激活新状态的逻辑有缺失：

• 现有全局清除active类的操作，已经能把旧按钮、旧按钮对应内部cateringLine上的active类全部移除
• 但点击新按钮时，你只给按钮本身加了active类，没有同步给这个按钮内部嵌套的cateringLine补上active类，才会出现激活异常的问题。

具体修改方案 #

只需要在现有按钮点击的回调逻辑里补1步操作即可：

• 保留原有的清除全局active类的逻辑，这一步本来就可以同时清除按钮和对应cateringLine上的旧激活状态，不需要单独针对cateringLine写清除逻辑
• 给当前点击按钮加完active类之后，通过当前按钮的DOM引用，查找它内部嵌套的cateringLine元素，同步给这个元素加上active类

参考代码 #

const sliderContainer = document.querySelector('.sliderContainers')
const allSliderBtns = document.querySelectorAll('.sliderContainers__sliderBtn')

allSliderBtns.forEach(btn => {
  btn.addEventListener('click', function () {
    // 原有逻辑：清除容器内所有激活状态
    sliderContainer.querySelectorAll('.active').forEach(el => {
      el.classList.remove('active')
    })
    // 原有逻辑：激活当前按钮
    this.classList.add('active')
    // 补充逻辑：激活当前按钮内部的cateringLine
    this.querySelector('.cateringLine').classList.add('active')
  })
})

方案优势 #

因为cateringLine和按钮是一一嵌套的对应关系，这种实现比单独全局遍历cateringLine的效率更高：

• 清除旧状态时，全局.active选择器已经会把所有带激活状态的元素（不管是按钮还是cateringLine）全部选中清除，没有冗余操作
• 激活新状态时，查找cateringLine的范围被限制在当前点击的按钮内部，不会误操作其他按钮下的cateringLine，匹配你描述的DOM结构时不会出现选择错误的问题。

注意：该实现基于你描述的DOM结构——每个cateringLine元素都嵌套在对应的sliderContainers__sliderBtn按钮内部，不存在跨按钮的结构。

内容的提问来源于stack exchange，提问作者Halp_am_stuck1