如何实现按钮点击切换样式：点击变色，再次点击恢复

云上老周

2026-8-5

解决方案

1. 核心方法：`toggleClass()`

jQuery自带的toggleClass()方法就是专门用来切换类的——元素有这个类就移除，没有就添加，完美匹配你的需求，不用自己写复杂的判断逻辑。

2. 动态元素的事件绑定（关键）

因为你的按钮是通过循环动态生成的，直接给按钮绑定点击事件可能失效，必须用事件委托：把事件绑定到静态存在的父元素上（比如所有按钮的容器，假设选择器是.button-container），再监听子按钮的点击。

完整代码示例

<!-- 循环生成的按钮结构示例 -->
<div class="button-container">
  <button class="toggle-btn">按钮1</button>
  <button class="toggle-btn">按钮2</button>
  <!-- 更多循环生成的按钮 -->
</div>

<style>
/* 按钮初始样式 */
.toggle-btn {
  background-color: #e0e0e0;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}
/* 点击后的高亮样式 */
.toggle-btn.clicked {
  background-color: #2196f3;
  color: #fff;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 事件委托绑定点击事件
$('.button-container').on('click', '.toggle-btn', function() {
  // 切换clicked类，实现颜色切换
  $(this).toggleClass('clicked');
  
  // 保留你原本的显示/隐藏逻辑，比如：
  // $(this).closest('.item').find('.target-content').toggle();
});
</script>

3. 手动判断的写法（不推荐，仅作参考）

如果你想了解用三元表达式手动判断的实现方式，代码如下：

$('.button-container').on('click', '.toggle-btn', function() {
  const $btn = $(this);
  // 三元表达式判断：有clicked类则移除，无则添加
  $btn.hasClass('clicked') ? $btn.removeClass('clicked') : $btn.addClass('clicked');
  
  // 你的显示/隐藏逻辑
});