javascript - 使用 javascript 循环切换背景颜色

Question

任何人都可以告诉我为什么以下代码可能无法循环遍历此处定义的颜色数组:

var colors = ["white", "yellow", "orange", "red"];

这是有问题的代码行:

setInterval(function(){
          currElm.style.background = colors[(nextColor++)%(colors.length)]);
      }, 500);

看起来这应该可行，我已经看到了几个例子，其中像这样的代码产生了颜色循环效果。有人发现上面(或下面)的代码有问题吗？

整个功能(正在进行中):

function setHighlight(elmId, index, songLength){
//alert("called set highlight, params are " + elmId + " " + index + " " + songLength);
var colors = ["white", "yellow", "orange", "red"];
var nextColor = 0;
if(index < 10)
    index = "000" + (index);
  else if (index < 100)
    index = "000" + (index);
  else if(index < 1000)
    index = "0" + (index);
  if(index >= 1000)
    index = index;
//alert("called set highlight, params are " + elmId + " " + index + " " + songLength);

//this will be useful for finding the element but pulsate will not work, need to       research animations in javascript

var mainElm = document.getElementById('active_playlist');
var elmIndex = "";

for(var currElm = mainElm.firstChild; currElm !== null; currElm = currElm.nextSibling){
  if(currElm.nodeType === 1){

  var elementId = currElm.getAttribute("id");

  if(elementId.match(/\b\d{4}/)){

    elmIndex = elementId.substr(0,4);
    alert(currElm.getAttribute('id'));

    if(elmIndex == index){
        setInterval(function(){
          currElm.style.background = colors[(nextColor++)%(colors.length)]);
      }, 500);
    }
  }
}
}//end for

}

非常感谢所有帮助。谢谢

Answer 1

一些不同的事情。首先，看起来您正在匹配 id 包含空格后跟 4 位数字的元素。我认为 ids 中不允许有空格。我真的很想查看应该匹配的元素的 HTML。其次，我认为您想将 currElm 分配给一个新变量，该变量将在 setInterval 处理程序中捕获。如果不这样做，我认为它可能始终引用最后一个匹配的元素，而不是每个匹配的元素。

for(var currElm = mainElm.firstChild; currElm !== null; currElm = currElm.nextSibling){

  if(currElm.nodeType === 1){

    var elementId = currElm.getAttribute("id");

    if(elementId.match(/\b\d{4}/)){

      elmIndex = elementId.substr(0,4);
      alert(currElm.getAttribute('id'));

      if(elmIndex == index){
          var that = currElm;
          setInterval(function(){
              that.style.background = colors[(nextColor++)%(colors.length)];
          }, 500);
      }
    }
  }

}//end for

编辑还要修复间隔处理程序中的额外括号。