如何通过JavaScript实现按钮点击添加.clicked类并切换移除

嘿，这事儿不难，我给你整理了一套完整的实现方案，能完美实现你要的「点击按钮加.clicked类，点别的按钮就把之前的去掉」的效果👇

HTML结构 #

首先咱们先搭好按钮的基础结构，给所有按钮统一加个.btn类，方便后续选择操作：

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

CSS样式 #

接下来写按钮的基础样式，以及.clicked类的高亮样式，你可以根据自己的需求调整颜色、边框这些：

/* 普通按钮的默认样式 */
.btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #ffffff;
  cursor: pointer;
  margin: 0 4px;
  transition: background-color 0.2s ease;
}

/* 点击后添加的.clicked类样式，用来区分选中状态 */
.btn.clicked {
  background-color: #2196F3;
  color: #ffffff;
  border-color: #1976D2;
}

JavaScript实现 #

这里给你两种实现方式，按需选择就行：

方式一：直接给每个按钮绑定事件（适合按钮数量少的场景） #

这种写法直观易懂，就是遍历所有按钮，给每个按钮绑定点击事件：

// 获取所有带.btn类的按钮
const buttons = document.querySelectorAll('.btn');

// 遍历每个按钮，绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', function() {
    // 第一步：先把所有按钮的.clicked类都去掉
    buttons.forEach(btn => btn.classList.remove('clicked'));
    // 第二步：给当前被点击的按钮加上.clicked类
    this.classList.add('clicked');
  });
});

方式二：事件委托（适合按钮多或动态添加按钮的场景） #

这种写法更高效，不需要给每个按钮单独绑定事件，哪怕之后新增按钮也能自动生效：

// 给按钮的父容器绑定事件（这里用body做示例，实际项目里尽量用更具体的父元素）
document.body.addEventListener('click', function(e) {
  // 判断点击的元素是不是我们的目标按钮
  if (e.target.classList.contains('btn')) {
    // 移除所有按钮的.clicked类
    document.querySelectorAll('.btn').forEach(btn => btn.classList.remove('clicked'));
    // 给当前点击的按钮加上.clicked类
    e.target.classList.add('clicked');
  }
});

简单说下逻辑：每次点击按钮时，先把所有按钮的.clicked类清空，再给当前点击的按钮加上这个类，这样就保证了永远只有一个按钮处于“被选中”的状态~

内容的提问来源于stack exchange，提问作者Eirik Vattøy