如何实现点击元素时循环切换类？多按钮独立循环切换样式

没问题，我来帮你搞定这个多按钮样式循环切换的需求！你原来的代码只针对单个按钮，要让多个按钮各自独立切换样式且互不影响，核心就是给每个按钮维护自己的状态，不能共用同一个current变量。下面是完整的实现方案：

1. HTML结构 #

先准备多个按钮，统一加上基础类cls，我们用data-current属性来存储每个按钮当前的样式索引（初始值设为0）：

<button class="cls cls1" data-current="0">按钮1</button>
<button class="cls cls1" data-current="0">按钮2</button>
<button class="cls cls1" data-current="0">按钮3</button>

2. CSS样式 #

完善你的样式，给三个状态设置不同的背景色：

.cls {
  margin: 10px 0;
  padding: 3px 30px;
  border: 1px solid gray;
  outline: 0;
  cursor: pointer;
}
.cls1 { background: gold; }
.cls2 { background: aqua; }
.cls3 { background: lime; } /* 这里可以替换成你想要的颜色 */

3. JavaScript逻辑 #

给每个按钮绑定点击事件，让它们独立管理自己的切换状态：

// 获取所有目标按钮
const buttons = document.querySelectorAll('.cls');
// 定义样式类数组
const classList = ['cls cls1', 'cls cls2', 'cls cls3'];

buttons.forEach(btn => {
  btn.addEventListener('click', function() {
    // 读取当前按钮的状态索引
    let current = parseInt(this.dataset.current);
    // 索引递增，取模实现循环
    current = (current + 1) % classList.length;
    // 更新按钮的类名
    this.className = classList[current];
    // 把更新后的索引存回data属性，供下次点击使用
    this.dataset.current = current;
  });
});

方案优势 #

• 用data-current属性存储每个按钮的状态，避免全局变量污染，每个按钮的状态完全独立，不会互相干扰。
• 批量获取按钮并绑定事件，代码简洁易维护，新增按钮时无需额外修改JS逻辑。
• 取模运算(current + 1) % classList.length保证索引始终在0-2之间循环，完美实现三次样式切换的需求。

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