Как поочередно подсветить блоки?

Question

[Олег Парфенюк]

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

document.addEventListener('click', function(e) {
  var color = e.target.getAttribute('data-color')
  if (color) {
    e.target.closest('li').style.backgroundColor = color
  }
})

<div class="wrapper">
  <div class="container">
    <div class="sub-container">
      <ul>
        <li><a href="#" data-color="red" class="red"></a></li>
        <li><a href="#" data-color="green" class="green"></a></li>
        <li><a href="#" data-color="blue" class="blue"></a></li>
      </ul>
    </div>
  </div>
  <div class="container">
    <div class="sub-container">
      <ul>
        <li><a href="#" data-color="red" class="red"></a></li>
        <li><a href="#" data-color="green" class="green"></a></li>
        <li><a href="#" data-color="blue" class="blue"></a></li>
      </ul>
    </div>
  </div>
  <div class="container">
    <div class="sub-container">
      <ul>
        <li><a href="#" data-color="red" class="red"></a></li>
        <li><a href="#" data-color="green" class="green"></a></li>
        <li><a href="#" data-color="blue" class="blue"></a></li>
      </ul>
    </div>
  </div>
</div>
<a href="#" class="animate-all">Animate All</a>

.wrapper{
  display: flex;
  flex-direction: row;
  padding: 20px;
  background-color: black;
}

.container {
  flex: 1;
  padding: 10px;
  transition: all 2s;
}

.sub-container {
  padding: 10px;
}

.sub-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  height: 300px;
  align-items: flex-end;
}

.sub-container ul li {
  flex: 1;
  margin: 10px;
  border: 3px solid #fff;
  padding: 10px;
  height: 60px;
}

.sub-container ul li a{
  display: block;
  width: 100%;
  height: 100%;
}

a.red {background-color: red}
a.green {background-color: green}
a.blue {background-color: blue}

Answer 1

[Stimulate]

https://jsfiddle.net/9qLhubjn/12/

Comments

[L_B_A]

@Stimulate
Подскажите пожалуйста, на какой метод заменить 'parentElement', чтобы менялся цвет контейнера ('class="container"') ?

Answer 2

[0xD34F]

Кого, как, с какой задержкой:

const elements = document.querySelectorAll('[data-color]');
const updateElement = el => el.parentNode.style.backgroundColor = el.dataset.color;
const delay = 500;

Такие есть варианты:

document.querySelector('.animate-all').addEventListener('click', () => {

  // сразу назначаем таймауты для всех элементов
  elements.forEach((n, i) => setTimeout(updateElement, (i + 1) * delay, n));

  // или, следующий таймаут назначается в коллбеке предыдущего
  (function next(i) {
    if (i < elements.length) {
      setTimeout(() => {
        updateElement(elements[i]);
        next(-~i);
      }, delay);
    }
  })(0);

  // или, назначаем интервал
  const intervalId = setInterval(i => {
    const el = elements.item(++i[0]);
    if (el) {
      updateElement(el);
    } else {
      clearInterval(intervalId);
    }
  }, delay, [ -1 ]);

});

Answer 3

[Aleksey Solovyev]

https://jsfiddle.net/ubmtt62k/2/