如何用jQuery实现元素多类名的顺序切换？

你的问题出在toggleClass的用法上——这个方法是切换每个类的存在状态（有就移除，没有就添加），没法实现按顺序循环切换多个类的需求。要实现多次点击依次切换不同类，得手动维护当前的类状态，每次点击时更新。

实现方案 #

核心逻辑是：定义好要循环的类列表，每次点击时找到当前类的位置，计算下一个要切换的类，然后替换元素的类。

优化后的完整代码 #

<!-- 给目标元素加固定id，避免类被替换后找不到元素 -->
<div id="shape" class="box1"></div>
<div id="buttox"><button id="button" class="butt1">Run Effect</button></div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
// 按切换顺序定义类数组
const classList = ['box1', 'box2', 'box3', 'box4'];

$("#button").click(function() {
  const $shape = $('#shape');
  // 找到当前元素所属类在数组中的索引
  let currentIndex = classList.findIndex(cls => $shape.hasClass(cls));
  // 计算下一个类的索引，超出数组长度时回到开头
  let nextIndex = (currentIndex + 1) % classList.length;
  // 移除所有目标类，添加下一个类
  $shape.removeClass(classList.join(' ')).addClass(classList[nextIndex]);
});
</script>

<style>
.box1 {
  background-color: #000000;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.box2 {
  background-color: #000000;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.box3 {
  background-color: #000000;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

.box4 {
  background-color: #000000;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

#buttox {
  position: absolute;
  top: 100px;
  left: 46%;
  right: 46%;
  height: 100px;
}
</style>

原代码问题说明 #

你之前用的$('.box1').toggleClass('box4, box2, box3')，jQuery会把逗号当成类名的一部分（尝试切换box4,、box2、box3这三个类）；即使去掉逗号写成toggleClass('box4 box2 box3')，也只是同时切换这三个类的存在状态——第一次点击添加所有类，第二次点击移除所有类，无法实现依次切换的效果。

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