javascript - 改变 block 的颜色

Question

有 4 个 block 。我需要让他们每个人依次将背景颜色更改为红色。在第二圈我得到一个错误。如何修复？

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,output

Answer 1

问题是 prev 最终大于 spanElems.length，所以 spanElems[prev] 是未定义的。尝试:prev = i % spanElems.length; 代替 prev = i;