Как по клику добавлять класс следующим 4 элементам??

Question

[Proroks]

Есть условная разметка

<wrapper>
      <item></item>
      <item></item>
      <item></item>
      <item></item>
      <item></item>
      <item></item>
      <item></item>
</wrapper>
<button>Click</button>

Как сделать что бы по клику на кнопку добавлялся класс трём первым элементам, и при последующих кликах добавлял класс следующим трём элементам и так далее. Буду очень признателен за помошь!

Answer 1

[0xD34F]

Кого надо кликать, кому какой класс добавлять:

const buttonSelector = 'селектор кнопки';
const itemsSelector = 'селектор элементов, которым надо добавлять класс';
const count = количествоЭлементовКоторымНадоДобалятьКласс;
const className = 'класс';

Вот так всё просто получается:

$(buttonSelector).click(function() {
  $(itemsSelector)
    .not(`.${className}`)
    .slice(0, count)
    .addClass(className);
});

или

const items = [...document.querySelectorAll(itemsSelector)];

document.querySelector(buttonSelector).addEventListener('click', () => {
  items
    .splice(0, count)
    .forEach(n => n.classList.add(className));
});