如何在addEventListener中使用querySelectorAll实现多组按钮交互

云原生阿岚

2026-8-13

解决方案

修正后的 JavaScript 代码

(function() {
  // 获取所有按钮组容器
  const buttonGroups = document.querySelectorAll('.dual-button');
  
  // 遍历每个按钮组，为内部按钮绑定事件
  buttonGroups.forEach(group => {
    const prevBtn = group.querySelector('.prev-button');
    const nextBtn = group.querySelector('.next-button');
    
    prevBtn.addEventListener('click', () => {
      // 激活左侧按钮，取消右侧按钮激活状态
      prevBtn.classList.replace('left-arrow-colour', 'left-arrow-colour-active');
      nextBtn.classList.replace('right-arrow-colour-active', 'right-arrow-colour');
    });
    
    nextBtn.addEventListener('click', () => {
      // 激活右侧按钮，取消左侧按钮激活状态
      prevBtn.classList.replace('left-arrow-colour-active', 'left-arrow-colour');
      nextBtn.classList.replace('right-arrow-colour', 'right-arrow-colour-active');
    });
  });
})();

关键修改说明

使用 querySelectorAll 遍历所有按钮组：
原代码用 querySelector 仅获取第一个匹配元素，导致只有第一组按钮生效。通过 querySelectorAll('.dual-button') 获取所有按钮组容器，再逐个处理每组内的按钮。
基于当前组定位元素：
在每个按钮组内部，通过 group.querySelector() 查找该组内的左右按钮，确保事件只影响当前组的元素，不会干扰其他组。
修正类名拼写不一致问题：
原 JS 代码中使用的 left-arrow-color/right-arrow-color 与 HTML/CSS 中的 left-arrow-colour/right-arrow-colour 拼写不一致，已统一为英式拼写，确保样式正确切换。
使用 classList.replace() 简化代码：
替换原有的 remove() + add() 组合，用 replace() 直接切换类名，代码更简洁高效。