Как сделать много кнопок "показать еще"?

Question

Как сделать этот код так, чтобы каждый раз не прописывать новую функцию для кнопок показать еще?

const showMore = document.querySelector('.btn-download');
const btnReviews = document.querySelectorAll('.reviews_btn');
const cards = document.querySelectorAll('.glass__container-card').length;
const cardsReviews = document.querySelectorAll('.reviews__wrapper-photo').length;
let items = 8;

  showMore.addEventListener('click', () => {
    items += 8; // сколько карточек открывается
    const array = Array.from(document.querySelector('.glass__container').children);
    const visItems = array.slice(0 , items);
    visItems.forEach(el => el.classList.add('is-visible'));
      
    if(visItems.length === cards) {
      showMore.style.display = 'none';
    }
  });

  btnReviews.addEventListener('click', () => {
    items += 8; // сколько карточек открывается
    const arrayReviews = Array.from(document.querySelector('.reviews__wrapper').children);
    const visItemsReviews = arrayReviews.slice(0 , items);

    visItemsReviews.forEach(el => el.classList.add('is-visible'));
      
    if(visItemsReviews.length === cardsReviews) {
      btnReviews.style.display = 'none';
    }
  });

.reviews__wrapper-photo:nth-child(n+5) {
    display: none;
}
.reviews__wrapper-photo.is-visible {
    display: block;
}
.glass__container-card:nth-child(n+5) {
    display: none;
}
.glass__container-card.is-visible {
    display: block;
}

 <div class="reviews__wrapper">
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
            </div>
     <div class="reviews_btn">
       <button>
           Показать ещё
      </button>
</div> 

 <div class="glass__wrapper">
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
            </div>
     <div class="btn-download">
       <button>
           Показать ещё
      </button>
</div>

Answer 1

Чтобы наверняка быть уверенным, что "раскроются" нужные элементы, я бы предложил использовать вариант с атрибутами data-*, для кнопки "Показать ещё" используем атрибут data-more-id с уникальным идентификатором и такой же используем для элементов под атрибутом data-more-toggle-id.
Далее, при нажатии кнопки, выполняем поиск по data-more-toggle-id="ID", получив нужные блоки "отображаем" их.

Плюсом такого варианта является то, что вёрстка никак не ограничивает поиск элементов, т.е. data-more-toggle-id могут быть в любой части документа.

// Проходим по всем кнопкам с атрибутом `data-more-id`
document.querySelectorAll('.btn-more[data-more-id]').forEach((button) => {
  const id = button.dataset.moreId; // Получаем значение ID
  
  // Вешаем слушатель клика на кнопку
  button.addEventListener('click', () => {
    // При нажатии выполняем поиск элементов с атрибутом `data-more-toggle-id` равным ID выше.
    const elems = document.querySelectorAll(`[data-more-toggle-id="${id}"]`);
    
    // Если такие элементы есть, то..
    if(elems.length > 0) {
      // Вешаем им класс `.is-visible`
      elems.forEach((elem) => elem.classList.add('is-visible'));
      // Удаляем кнопку "Показать ещё"
      button.remove();
    }
  })
})

.reviews__wrapper-photo:nth-child(n+5) {
  display: none;
}

.reviews__wrapper-photo.is-visible {
  display: inline-block;
}

.glass__container-card:nth-child(n+5) {
  display: none;
}

.glass__container-card.is-visible {
  display: inline-block;
}

<div class="reviews__wrapper">
  <a class="reviews__wrapper-photo" data-more-toggle-id="0">lorem</a>
  <a class="reviews__wrapper-photo" data-more-toggle-id="0">lorem</a>
  <a class="reviews__wrapper-photo" data-more-toggle-id="0">lorem</a>
  <a class="reviews__wrapper-photo" data-more-toggle-id="0">lorem</a>
  <a class="reviews__wrapper-photo" data-more-toggle-id="0">lorem</a>
  <a class="reviews__wrapper-photo" data-more-toggle-id="0">lorem</a>
  <a class="reviews__wrapper-photo" data-more-toggle-id="0">lorem</a>
</div>
<div class="reviews_btn">
  <button class="btn-more" data-more-id="0">Показать ещё</button>
</div>

<div class="glass__wrapper">
  <a class="glass__container-card" data-more-toggle-id="1">lorem</a>
  <a class="glass__container-card" data-more-toggle-id="1">lorem</a>
  <a class="glass__container-card" data-more-toggle-id="1">lorem</a>
  <a class="glass__container-card" data-more-toggle-id="1">lorem</a>
  <a class="glass__container-card" data-more-toggle-id="1">lorem</a>
  <a class="glass__container-card" data-more-toggle-id="1">lorem</a>
  <a class="glass__container-card" data-more-toggle-id="1">lorem</a>
</div>
<div class="btn-download">
  <button class="btn-more" data-more-id="1">Показать ещё</button>
</div>

Несмотря на такое решение, я бы всё-таки отталкивался от вёрстки, т.е. есть родительский блок, в котором находится кнопка "Показать ещё" и элементы которые нужно показать, и при этом мы не назначаем никаких идентификаторов, а ищем только внутри этого родительского блока.

// Проходим по всем элементам `.more-parent`
document.querySelectorAll('.more-parent').forEach((parent) => {
  // Ищем все элементы и кнопку внутри текущего `.more-parent`
  const moreElements = parent.querySelectorAll('.more-elements');
  const moreButton = parent.querySelector('.more-button');
  
  // Если элементы и кнопка существуют, то..
  if(moreButton && moreElements.length > 0) {
    // Вешаем слушатель клика на кнопку
    moreButton.addEventListener('click', () => {
      // Вешаем всем элементам класс `.is-visible`
      moreElements.forEach((elem) => elem.classList.add('is-visible'));
      // Удаляем кнопку "Показать ещё"
      moreButton.remove();
    })
  }
})

.reviews__wrapper-photo:nth-child(n+5) {
  display: none;
}

.reviews__wrapper-photo.is-visible {
  display: inline-block;
}

.glass__container-card:nth-child(n+5) {
  display: none;
}

.glass__container-card.is-visible {
  display: inline-block;
}

<div class="more-parent">
  <div class="reviews__wrapper">
    <a class="reviews__wrapper-photo more-elements">lorem</a>
    <a class="reviews__wrapper-photo more-elements">lorem</a>
    <a class="reviews__wrapper-photo more-elements">lorem</a>
    <a class="reviews__wrapper-photo more-elements">lorem</a>
    <a class="reviews__wrapper-photo more-elements">lorem</a>
    <a class="reviews__wrapper-photo more-elements">lorem</a>
    <a class="reviews__wrapper-photo more-elements">lorem</a>
  </div>
  <div class="reviews_btn">
    <button class="more-button">Показать ещё</button>
  </div>
</div>

<div class="more-parent">
  <div class="glass__wrapper">
    <a class="glass__container-card more-elements">lorem</a>
    <a class="glass__container-card more-elements">lorem</a>
    <a class="glass__container-card more-elements">lorem</a>
    <a class="glass__container-card more-elements">lorem</a>
    <a class="glass__container-card more-elements">lorem</a>
    <a class="glass__container-card more-elements">lorem</a>
    <a class="glass__container-card more-elements">lorem</a>
  </div>
  <div class="btn-download">
    <button class="more-button">Показать ещё</button>
  </div>
</div>

БЛОГ НА HUSL

Как сделать много кнопок "показать еще"?

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