主页 / 问题 / 1586877
Accepted
Майя
Asked:2024-07-11 22:32:58 +0000 UTC2024-07-11 22:32:58 +0000 UTC

如何制作多个“显示更多”按钮？

  • 772

我怎样才能编写这段代码，这样我就不必每次都编写新函数来显示更多按钮？

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>

javascript

1 个回答

  1. Best Answer

    为了确保“显示”必要的元素，我建议使用带有属性的选项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>

    • 0

相关问题