SineYlo
@SineYlo
⚜️ Full Stack Web-developer | UX/UI ⚜️

Как показать определённое количество блоков по клику?

Знаю, точно такой же вопрос уже был, но там в ответе не то что нужно.

<ul class="box-list wrapper__box">
   <li class="box-list__item">1</li>
   <li class="box-list__item">2</li>
   <li class="box-list__item">3</li>
   <li class="box-list__item">4</li>
   <li class="box-list__item">5</li>
   <li class="box-list__item">6</li>
   <li class="box-list__item">7</li>
   <li class="box-list__item">8</li>
   <li class="box-list__item">9</li>
   <li class="box-list__item">10</li>
   <li class="box-list__item">11</li>
   <li class="box-list__item">12</li>
   <li class="box-list__item">13</li>
   <li class="box-list__item">14</li>
   <li class="box-list__item">15</li>
   <li class="box-list__item">16</li>
   <li class="box-list__item">17</li>
   <li class="box-list__item">18</li>
   <li class="box-list__item">19</li>
   <li class="box-list__item">20</li>
</ul>
<button class="show-more" type="button">Show more</button>


.box-list__item {
  display: none;
}

.ui-box-active {
  display: grid;
}

.ui-button-hidden {
  display: none;
}


В общем есть вот такой код JS.
На данным момент при загрузке страницы отображаемых блоков - 0.
Оно и понятно ведь они скрыты с помощью display: none;
Нужно чтобы при загрузке страницы отображалось 8 блоков, а при каждом клике на кнопку показывалось ещё 4.
Можно было бы, конечно, прописать сразу 8 блокам в разметке активный класс, но мне кажется лучше это сделать через JS чтобы не засорять лишний раз разметку.

const boxItems = document.querySelectorAll('.box-list__item');
const showMoreButton = document.querySelector('.show-more');

let per = 4;
let counter = 1;
let total = 0;

showMoreButton.addEventListener('click', (e) => {
  total = per * (counter++);

  [...boxItems].slice(0, total).forEach((el) => {
    el.classList.add('ui-box-active');
  });

  if (total >= [...boxItems].length) {
    e.currentTarget.classList.add('ui-button-hidden');
  }
});


В идеале конечно если есть такая возможно, чтобы можно было указать, например, в переменную кол-во отображаемых сразу блоков и кол-во, которое нужно показывать при каждом клике.
  • Вопрос задан
  • 77 просмотров
Решения вопроса 2
hahenty
@hahenty
('•')
.box-list__item {
  display: grid;
}
.box-list__item:nth-child(8) ~ .box-list__item{
  display: none;
}
.box-list__item:nth-child(8) ~ .box-list__item.ui-box-active{
  display: grid;
}


[...document.querySelectorAll( '.box-list__item:nth-child(8) ~ .box-list__item:not(.active)' )]
  .slice(0,4)
  .forEach( el => el.classList.add('ui-box-active') )


Понятно?
Ответ написан
0xD34F
@0xD34F Куратор тега JavaScript
const SHOW_ON_LOAD = 3;
const SHOW_MORE = 2;

const items = [...document.querySelectorAll('.box-list__item')];
const button = document.querySelector('.show-more');

showItems(SHOW_ON_LOAD);
button.addEventListener('click', () => showItems(SHOW_MORE));

function showItems(count) {
  items.splice(0, count).forEach(n => n.classList.add('ui-box-active'));
  if (!items.length) {
    button.classList.add('ui-button-hidden');
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы