javascript - 如何通过数组无限循环切换类列表？

Question

我试图在 3 个 H1 元素上获得循环/循环效果，为每个 H1 显示紫色字体颜色几秒钟，然后更改为第一个 H1 正下方的另一个 H1。

我希望这种效果是无限的，我考虑过使用 for loop 和 setInterval 但我无所适从。

setInterval(changeColorLoop(), 2000);

function changeColorLoop() {
  const titleArtArray = document.querySelectorAll(".art-text");

  for (var i = 0; i < titleArtArray.length; i++) {
    titleArtArray[i].classList.toggle = ".purple";
  }
}



  <div class="art-column">
                <h1 class="art-text">Think</h1>
                <h1 class="art-text">Design</h1>
                <h1 class="art-text">Code</h1>
              </div>


.purple {
  color: purple;
}

Answer 1

这让“动画”开始了。需要一点点抛光。编辑:抛光，感谢@jeanjacquesgourdin。编辑 2:添加了一些 CSS 过渡

let index = 0;

function changeColorLoop() {
  const titleArtArray = document.querySelectorAll(".art-text");

  titleArtArray[index % 3].classList.toggle("purple");
  titleArtArray[(index + 1) % 3].classList.toggle("purple");
  index++
}

setInterval(changeColorLoop, 1000);

.art-text {
  transition: all 1000ms ease-in-out;
}

.purple {
  color: purple;
}

<div class="art-column">
  <h1 class="art-text purple">Think</h1>
  <h1 class="art-text">Design</h1>
  <h1 class="art-text">Code</h1>
</div>