如何实现JS元素数组无限循环切换toggle classList类名？

你的代码无法生效有3个核心错误：

• setInterval第一个参数要求传函数引用，你写的changeColorLoop()带了括号，会在代码加载时立刻执行一次函数，把执行返回的undefined传给定时器，后续不会按周期触发切换逻辑
• classList.toggle是方法不是可赋值的属性，且操作类名时不需要加类选择器的.前缀，你写的titleArtArray[i].classList.toggle = ".purple"完全不会生效
• 你在循环里对所有元素统一执行toggle操作，没有维护当前应该高亮的元素索引，根本无法实现单元素依次高亮的轮播效果

你的HTML和CSS代码不需要调整，只需要替换JS逻辑即可，核心思路是单独维护一个当前高亮索引，每次定时器触发时先移除上一个元素的高亮类，再移动索引给下一个元素加高亮类，通过取模实现无限循环：

const titleArtArray = document.querySelectorAll(".art-text");
// 初始化当前高亮索引，默认第一个元素高亮
let activeIndex = 0;
titleArtArray[activeIndex].classList.add("purple");

// 传入函数引用，不要加执行括号
setInterval(changeColorLoop, 2000);

function changeColorLoop() {
  // 移除当前高亮元素的紫色样式
  titleArtArray[activeIndex].classList.remove("purple");
  // 索引后移，通过取模运算在最后一个元素之后回到第一个，实现循环
  activeIndex = (activeIndex + 1) % titleArtArray.length;
  // 给新的目标元素添加紫色样式
  titleArtArray[activeIndex].classList.add("purple");
}

如果想要切换效果更自然，可以给标题加颜色过渡属性，在CSS里补充如下代码即可：

.art-text {
  transition: color 0.3s ease;
}

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