JavaScript切换器仅生效一次 如何用单个按钮切换4个div的类名

• 原代码正则匹配后的判断逻辑错误：捕获到的g1是完整的class="red"/class="green"字符串，和"red"直接对比永远不成立，导致仅能触发一次red转green，后续无法反向切换
• 直接修改innerHTML的实现方式稳定性极差，会销毁子元素所有绑定的事件、内存数据，推荐直接操作DOM原生的classList属性实现类名切换

JavaScript 代码 #

function toggleColor() {
  // 获取wrapper下所有需要切换颜色的div元素
  const colorBoxes = document.querySelectorAll('.wrapper div');
  colorBoxes.forEach(box => {
    // 交替切换red和green类名
    box.classList.toggle('red');
    box.classList.toggle('green');
  });
}

CSS 代码（无需修改） #

.wrapper * {
  width: 100px;
  height: 100px;
  margin: 100px;
}

.red {
  background: #f00;
}

.green {
  background: #0f0;
}

HTML 代码（无需修改） #

<button onclick="toggleColor()">toggle</button>

<div class="wrapper">
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
</div>

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