Как повесить на каждый элемент массива класс, через определенный интервал?

167

09 ноября 2018, 13:00

Объясните,пожалуйста, как можно повесить класс на каждый элемент массива через определенный интервал?

$(function() { 
  $array = $('.array-item'); 
 
  setTimeout(function() { 
      $array.each(function() { 
        setTimeout(function() {  
            $(this).addClass('red'); 
        }, 300); 
      }); 
  }, 1000); 
});

div { 
  display: block; 
  width: 100px; 
  height: 50px; 
  padding: 15px; 
  background-color: green; 
  font-size: 20px; 
  line-height: 20px; 
  text-align: center; 
} 
 
div.red { 
  background-color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="array-item">1</div> 
<div class="array-item">2</div> 
<div class="array-item">3</div>

тут я хочу,чтобы через секунду после загрузки страницы, зеленые блоки стали красными по очереди с интервалом в 300мс. Если можно, хотелось бы увидеть решение и на JS, и на JQ. Заранее спасибо))

P.S. и укажите,пожалуйста, почему мой код не работает)))

Answer 1

Во-первых у вас пример не работает из-за того, что функция, которую вы пихаете в таймер, содержит собственный this. Нужно либо добавить к ней .bind(this), либо использовать лямбда-функцию. более того - в вашем примере всё перебирается и ставится на таймер - скрипт не ждёт пока покрасится предыдущий блок и просто кидает свой таймер. Реализовать так, как вам нужно, можно примерно так:

$(function() { 
  $array = $('.array-item'), lastIndex = 0; 
 
  setTimeout(setItemColor, 300); 
   
  function setItemColor () { 
        jQuery($array[lastIndex]).addClass("red"); 
         
        lastIndex += 1; 
         
        if ($array.hasOwnProperty(lastIndex)) 
            setTimeout(setItemColor, 300); 
  }; 
});

div { 
  display: block; 
  width: 100px; 
  height: 50px; 
  padding: 15px; 
  background-color: green; 
  font-size: 20px; 
  line-height: 20px; 
  text-align: center; 
} 
 
div.red { 
  background-color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="array-item">1</div> 
<div class="array-item">2</div> 
<div class="array-item">3</div>

Answer 2

Что-то вы перемудрили

$(function() { 
 
  $current = $('.array-item').first(); 
 
  function changeColor() { 
      $current.addClass('red'); 
      $current = $current.next(); 
      setTimeout(changeColor, 300); 
  } 
 
  setTimeout(changeColor, 300); 
});

div.array-item { 
  display: block; 
  width: 100px; 
  height: 50px; 
  padding: 15px; 
  font-size: 20px; 
  line-height: 20px; 
  text-align: center; 
  background-color: green; 
} 
 
div.red { 
  background-color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 <div id="container"> 
<div class="array-item">1</div> 
<div class="array-item">2</div> 
<div class="array-item">3</div> 
</div>