циклический переход по фоновым цветам с использованием JavaScript

StackOverflow https://stackoverflow.com/questions/1036136

  •  10-07-2019
  •  | 
  •  

Вопрос

Может кто-нибудь сказать мне, почему следующий код может не циклически проходить через массив цветов, определенный здесь: 

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

}

Вся помощь очень ценится. Благодаря

Это было полезно?

Решение

Пара разных вещей. Во-первых, похоже, что вы сопоставляете элементы, идентификаторы которых содержат пробел, за которым следуют 4 цифры. Я не думаю, что пробелы разрешены в идентификаторах. Мне бы очень хотелось увидеть 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

РЕДАКТИРОВАТЬ . Также исправьте лишние скобки в обработчике интервалов.

Другие советы

Синтаксическая ошибка, дополнительные правые скобки ')' в конце строки: 

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

Я также вижу лишнюю правую скобку!

Но переменная nextColor уже инициализируется нулем сразу после массива цветов.

Это работа для Firebug. Вы можете установить точку останова прямо перед вызовом setInterval и протестировать различные переменные, которые есть в анонимной функции setInterval.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top