JS类切换异常：仅菜单生效，需实现菜单与内容区同步切换is-active类

我编写了一段为元素添加/移除类名的代码，目前仅菜单（.list元素）能正常切换is-active类，但中间的内容区（.play元素，大块白色区域）完全没反应。需要实现点击菜单任意按钮时，菜单和内容区的is-active类同步切换。

原代码 #

const list = Array.from(document.querySelectorAll('.list'))
const play = Array.from(document.querySelectorAll('.play'))

const clearActiveClass = (element, className = 'is-active') => {
  element.find(item => item.classList.remove(`${ className }`))
}

const setActiveClass = (element, index, className = 'is-active') => {
  element[index].classList.add(`${ className }`)
}

const checkoutTabs = (item, index) => {
  item.addEventListener('click', () => {

    if (item.classList.contains('is-active')) return
    console.log(item)

    clearActiveClass(list)
    clearActiveClass(play)

    setActiveClass(list, index)
    setActiveClass(play, index)
  })
}

list.forEach(checkoutTabs)

问题原因与修复 #

核心问题在clearActiveClass函数里的find方法：find会在遍历数组时找到第一个符合条件的元素后就停止执行，导致只有数组中第一个元素的is-active类被移除，后续元素的类没被清理。如果内容区之前有其他元素带着is-active类，就会导致新的类无法正常显示效果。

把find替换成forEach，就能遍历数组中所有元素，确保每个元素都移除目标类：

const list = Array.from(document.querySelectorAll('.list'))
const play = Array.from(document.querySelectorAll('.play'))

const clearActiveClass = (element, className = 'is-active') => {
  // 用forEach代替find，遍历所有元素移除类
  element.forEach(item => item.classList.remove(className))
}

const setActiveClass = (element, index, className = 'is-active') => {
  element[index].classList.add(className)
}

const checkoutTabs = (item, index) => {
  item.addEventListener('click', () => {
    if (item.classList.contains('is-active')) return

    clearActiveClass(list)
    clearActiveClass(play)

    setActiveClass(list, index)
    setActiveClass(play, index)
  })
}

list.forEach(checkoutTabs)

另外补充两个小优化：

• 移除了不必要的模板字符串${className}，直接使用className参数即可
• 保留了点击已激活项直接返回的逻辑，避免无效操作

额外检查点 #

如果修复后内容区还是没反应，建议确认：

• .play元素的数量和.list元素的数量完全一致，确保索引index能一一对应
• 内容区的is-active类有正确的CSS样式，不会被其他样式覆盖

内容的提问来源于stack exchange，提问作者Антон Девяткин