JavaScript点击按钮切换背景色时索引归0后无法正常循环切换

原始代码 #

var a = ["red", "blue", "green"];
var i = 0
$(".button").click(function() {
  i++;
  if (i >= 3) {
    i = 0;
  }
  console.log(i);
  $("body").addClass(a[i]);
  console.log(a[i]);
});

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="button">Click</button>

预期效果：点击按钮按red→blue→green顺序循环切换body背景色
实际表现：初始页面白色，第一次点击变blue，第二次变green，后续点击颜色不再变化；控制台打印的索引、颜色值符合循环逻辑，但页面显示异常。

两个问题共同导致异常：

• 逻辑顺序偏差：初始i=0，点击事件中先执行i++再取颜色值，第一次点击直接取到索引1对应的blue，跳过了第一个red。
• 核心原因：每次点击仅通过addClass()添加新的颜色类，从未移除之前添加的旧颜色类，导致body元素上会同时叠加多个颜色类。由于三个颜色类的CSS选择器优先级完全相同，根据CSS层叠规则，同优先级下样式表中后定义的规则会覆盖先定义的规则，上述CSS中.green是最后定义的样式，所以当第二次点击给body加上green类后，后续不管再添加red还是blue类，只要green类还留在body上，页面就会一直显示绿色，和控制台打印的当前目标颜色无关。

调整两处逻辑即可：

1. 每次添加新颜色类前，先移除body上所有已有的颜色类，避免多类共存导致的样式覆盖
2. 调整索引更新顺序：先使用当前索引添加对应颜色，再递增索引做循环判断，保证第一次点击就能触发red

修复后的JS代码如下（CSS、HTML无需修改）：

var a = ["red", "blue", "green"];
var i = 0
$(".button").click(function() {
  // 一次性移除所有颜色类
  $("body").removeClass(a.join(' '));
  // 添加当前索引对应的颜色
  $("body").addClass(a[i]);
  console.log(i, a[i]);
  // 更新索引，超出数组长度则重置
  i++;
  if (i >= a.length) {
    i = 0;
  }
});

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