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

Question

При клике на кнопку, <li> должны добавляться по очереди (и не удаляться). Сейчас у меня, при клике, добавляются все <li> сразу. Также, при клике на одну из кнопок, всё применяется ко всем блокам.

const profileAdded = document.querySelectorAll('.added');
const addedBlock = document.querySelectorAll('.added-block');
    profileAdded.forEach(added => {
        added.addEventListener("click", function (e) {
            addedBlock.forEach(block => {
                block.classList.add('_active');
            });
        });
  });

.added-block{
  display: none;
}
.added-block._active{
  display: block;
}

<div>
  <button class="added">КЛИК</button>
  <ul class="menu__list">
    <li class="menu__item">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
  </ul>
</div>

<div>
  <button class="added">КЛИК</button>
  <ul class="menu__list">
    <li class="menu__item">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
  </ul>
</div>

Как сделать что-бы клик применялся только в своём блоке и добавлял <li> поочередно?

Answer 1

Если Вы прописали добавление класса всем заранее найденным элементам в одном цикле, то всё правильно - всем сразу и назначается.

Вам же необходимо искать следующий элемент каждый раз и в своём блоке:

const profileAdded = document.querySelectorAll('.added');

profileAdded.forEach(added => {
  added.addEventListener('click', function() {
    let block = this.nextElementSibling.querySelector('.added-block:not(._active)')
    if (block) block.classList.add('_active');
  });
});

.added-block { display: none; }
.added-block._active { display: block; }

<div>
  <button class="added">КЛИК</button>
  <ul class="menu__list">
    <li class="menu__item">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
  </ul>
</div>

<div>
  <button class="added">КЛИК</button>
  <ul class="menu__list">
    <li class="menu__item">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
    <li class="menu__item added-block">LOREM</li>
  </ul>
</div>

БЛОГ НА HUSL

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

Ответы (1 шт):