Новый массив из старого (DOM)

152

19 февраля 2022, 19:30

Есть псевдомассив элементов со страницы, храниться в переменной.

Я хочу чтобы при нажатии на каждый элемент к нему присваивался класс active, но с одним условием: что при нажатии на рандомный элемент из этого массива к нему присваивался класс active, после этого, если нажать на ещё один элемент (рандомный), то к нему тоже присваивался класс active, но если нажать на третий, рандомный опять же, элемент то у первого нажатого убирался класс active, но у второго и третьего оставался и так далее.

Надеюсь понятно изъяснил, нуждаюсь в помощи как сделать такую логику, хотя бы русскими словами что использовать.

Answer 1

~function (els) { 
  var active = [] 
   
  for (var x of els) { 
    x.addEventListener('click', handler) 
  } 
   
  function handler(event) { 
    if (!this.classList.contains('active')) { 
      this.classList.add('active') 
 
      if (active.push(this) == 3) { 
        active[0].classList.remove('active') 
        active.shift() 
      } 
    } 
  } 
}(document.querySelectorAll('button'))

html { counter-reset: i; } 
button::before { counter-increment: i; content: counter(i); } 
.active { color: red; }

<button></button> 
<button></button> 
<button></button> 
<button></button> 
<button></button> 
<button></button> 
<button></button> 
<button></button> 
<button></button>