如何为同一class的所有元素绑定事件？按钮同步变色代码修正

核心问题及修改点： #

1. HTMLCollection无法直接使用forEach：document.getElementsByClassName()返回的是HTMLCollection对象，不是数组，不能直接调用forEach方法，需要先转成数组（比如用Array.from()或者展开运算符[...one]）。

2. 点击单个按钮时需同步修改所有按钮样式：你的代码只修改了被点击按钮的样式，要实现点击任意按钮所有按钮同时变色，需要在点击事件里遍历所有.one元素统一修改样式。

3. 条件判断错误：代码里用了赋值运算符=，应该用比较运算符===；另外element.style.backgroundColor只能获取行内样式，初始样式是从CSS类来的，判断会不准确，建议用全局变量记录状态，或者用getComputedStyle获取实际样式。

修复后的完整代码： #

JavaScript

// 转成数组方便遍历
const buttons = Array.from(document.getElementsByClassName('one'));
// 用变量记录当前背景状态
let isLight = true;

buttons.forEach(button => {    
    button.addEventListener("click", () => {
      // 遍历所有按钮修改样式
      buttons.forEach(btn => {
        btn.style.backgroundColor = isLight ? "#56F1FF" : "#DCDCDC";
      });
      // 切换状态
      isLight = !isLight;
    })
});

CSS（保持不变）

.one {
  background-color: #DCDCDC;
}

.one:hover {
  background-color: #56F1FF;
}

HTML（保持不变）

<button class="one">Catch</button>
<button class="one">Change</button>
<button class="one">Choose</button>

更优雅的方案（CSS类切换） #

这种方式无需操作行内样式，更符合前端最佳实践：

JavaScript

const buttons = Array.from(document.getElementsByClassName('one'));
let isActive = false;

buttons.forEach(button => {    
    button.addEventListener("click", () => {
      buttons.forEach(btn => {
        isActive ? btn.classList.remove('active') : btn.classList.add('active');
      });
      isActive = !isActive;
    })
});

CSS

.one {
  background-color: #DCDCDC;
}

.one:hover {
  background-color: #56F1FF;
}

.one.active {
  background-color: #56F1FF;
}

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