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

语法错误，行尾的右括号')'：

currElm.style.background = colors[(nextColor++)%(colors.length)]);

Answer 2

有几件不同的事情。首先，看起来你匹配的元素的id包含一个后跟4位数字的空格。我不认为ID中允许使用空格。我真的很想看到应该匹配的元素的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

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

Answer 3

我也看到了右括号！

但是nextColor变量已经在颜色数组之后初始化为零。

这是Firebug的工作。您可以在进入setInterval调用之前设置断点，并测试setInterval的匿名函数中的各种变量。

用javascript循环通过背景颜色

3 个答案: