更改块中的颜色

Changing colors in blocks

本文关键字：颜色      更新时间：2024-05-18

共有4个块。我需要让他们每个人依次将背景颜色改为红色。在第二圈我出现了一个错误。如何修复？

var spanElems = [].slice.call( document.querySelectorAll('.block__item') ),
    i = 0, timer, prev;
(function foo() {
  spanElems[prev || 0].style.background = '';
  prev = i;
  spanElems[i++ % spanElems.length].style.background = 'red';
  console.log(i, prev);
  timer = setTimeout(foo, 3000);
})();
.block {
  margin-top: 100px;
}
.block__item {
  padding: 10px;
  border: 2px solid #ccc;
}
<div class="block">
  <span class="block__item">1</span>
  <span class="block__item">2</span>
  <span class="block__item">3</span>
  <span class="block__item">4</span>
</div>

沙盒：http://jsbin.com/lowimewegu/edit?html，输出

问题是prev最终大于spanElems.length，因此spanElems[prev]未定义。尝试：prev = i % spanElems.length;代替prev = i;

好吧，这个错误表明你无法获得null的样式属性，并且prev变量在达到4之后似乎不会重置回0，所以prev似乎是问题所在。

相关文章：