0

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

$(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. и укажите,пожалуйста, почему мой код не работает)))

2 ответа 2

1

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

$(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>

2
  • нет,не перемудрил))в том то и дело,что мне надо,чтобы блоки красились по очереди с интервалом,а не все сразу Commented 18 авг. 2018 в 20:11
  • @SergeyKanyukov, подправил. +1 к варианту решения. Но принцип как у ответа выше
    – ArchDemon
    Commented 18 авг. 2018 в 20:21
0

Во-первых у вас пример не работает из-за того, что функция, которую вы пихаете в таймер, содержит собственный 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.