按钮点击添加蓝色边框，切换时恢复原样式实现问题求助

核心思路 #

用CSS类统一管理选中状态，点击时先清除所有按钮的选中样式，再给当前点击的按钮添加选中类，避开循环里常见的闭包陷阱。

完整代码示例 #

HTML

<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<button class="btn">按钮4</button>

CSS

.btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  margin: 0 4px;
}

.btn.blue-border {
  border-color: #007bff;
  border-width: 2px;
}

JavaScript

// 获取所有按钮元素
const buttons = document.querySelectorAll('.btn');

// 遍历绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', function() {
    // 先移除所有按钮的选中类
    buttons.forEach(btn => btn.classList.remove('blue-border'));
    // 给当前点击的按钮添加选中类
    this.classList.add('blue-border');
  });
});

之前循环失败的常见原因 #

如果之前用for循环配合var声明变量，会因为函数作用域+闭包的特性，导致所有事件绑定的都是最后一个按钮的引用。换成let（块级作用域）或者上面的forEach就能解决——forEach的回调函数会为每个元素创建独立的作用域，不会出现变量引用混乱的问题。

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