如何用toggleClass实现div元素类名的无限循环依次切换？

你的现有代码只能完成一轮从第一个到最后一个div的切换，要实现最后一个div激活后自动切回第一个、无限循环的效果，可以用索引追踪+定时循环的方式改造，具体代码如下：

HTML（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-sequence">
  <div class="text">Text 1</div>
  <div class="text">Text 2</div>
  <div class="text">Text 3</div>
  <div class="text">Text 4</div>
  <div class="text">Text 5</div>
  <div class="text">Text 6</div>
</div>

CSS（无需修改） #

.text {
  opacity: 0
}

.text.active {
  opacity: 1
}

修改后的JavaScript代码 #

const timeout = 2000;
// 获取所有文本元素集合并缓存
const $texts = $(".text-sequence .text");
const totalTexts = $texts.length;
let currentIndex = 0;

// 定义切换逻辑函数
function switchText() {
  // 移除所有元素的active类
  $texts.removeClass('active');
  // 给当前索引的元素添加active类
  $texts.eq(currentIndex).addClass('active');
  // 更新索引：到达最后一个后自动重置为0
  currentIndex = (currentIndex + 1) % totalTexts;
}

// 初始延迟后启动第一次切换，之后保持定时循环
setTimeout(() => {
  switchText();
  setInterval(switchText, timeout);
}, timeout);

改造思路说明 #

1. 提前缓存所有文本元素，避免每次切换重复查询DOM，提升性能
2. 用currentIndex变量追踪当前激活元素的位置
3. 每次切换先清空所有元素的active类，再给目标元素添加，确保只有一个元素处于激活状态
4. 用取余运算(currentIndex + 1) % totalTexts实现索引自动循环，无需额外判断边界
5. 保留原代码的初始延迟逻辑，之后用setInterval维持循环切换

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