Кнопка «показать больше». Как изменить количество скрываемых элементов в зависимости от разрешения экрана?

Question

Есть кнопка "показать больше"-скрывает 2 элемента из 5 на десктопе, на разрешениях меньше 768 нужно скрывать уже 3 элемента из 5, но этот код срабатывает только при уменьшении разрешения, при увеличении без перезагрузки страницы скрытый ранее элемент не появляется. За основу взят ответ OPTIMUS PRIME

const more = document.querySelectorAll('.btn');

window.addEventListener('resize', () => {
  if (window.innerWidth <= 768) {
    let item = document.querySelector(".list-item:nth-child(3)");
    item.classList.add('_hidden');
  }
  if (window.innerWidth > 768) {
    item.classList.remove('_hidden');
  }
});

for (let i = 0; i < more.length; i++) {
  more[i].addEventListener('click', function() {
    let showPerClick = 3;

    let hidden = this.parentNode.querySelectorAll('li._hidden');
    for (let i = 0; i < showPerClick; i++) {
      if (!hidden[i]) return this.outerHTML = "";
      hidden[i].classList.remove('_hidden');
    }
  });
}

.list {
  display: flex;
  list-style: none;
}

.list-item {
  margin-right: 20px;
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: #cacaca;
}

._hidden {
  display: none;
}

.btn {
  margin-left: 190px;
}

<ul class="list">
  <li class="list-item">Item 1</li>
  <li class="list-item">Item 2</li>
  <li class="list-item">Item 3</li>
  <li class="list-item _hidden">Item 4</li>
  <li class="list-item _hidden">Item 5</li>
</ul>
<button class="btn">Ещё</button>

Answer 1

item.classList.remove('_hidden');

Uncaught ReferenceError: item is not defined

Мне кажется, у Вас там в принципе проблемы в самом алгоритме, однако, я исправил Ваш код, чтобы он работал так, как Вы просите.

    const more = document.querySelectorAll('.btn');

    window.addEventListener('resize', () => {
        let item;
      if (window.innerWidth <= 768) {
        item = document.querySelector(".list-item:nth-child(3)");
        item.classList.add('_hidden');
      }
      if (window.innerWidth > 768) {
        item = document.querySelector(".list-item:nth-child(3)");
        item.setAttribute('class', item.getAttribute('class').replace(' _hidden', ''));
      }
    });

    for (let i = 0; i < more.length; i++) {
      more[i].addEventListener('click', function() {
        let showPerClick = 3;

        let hidden = this.parentNode.querySelectorAll('li._hidden');
        for (let i = 0; i < showPerClick; i++) {
          if (!hidden[i]) return this.outerHTML = "";
          hidden[i].classList.remove('_hidden');
        }
      });
    }

    .list {
      display: flex;
      list-style: none;
    }

    .list-item {
      margin-right: 20px;
      width: 100px;
      height: 100px;
      text-align: center;
      background-color: #cacaca;
    }

    ._hidden {
      display: none;
    }

    .btn {
      marg

<ul class="list">
  <li class="list-item">Item 1</li>
  <li class="list-item">Item 2</li>
  <li class="list-item">Item 3</li>
  <li class="list-item _hidden">Item 4</li>
  <li class="list-item _hidden">Item 5</li>
</ul>
<button class="btn">Ещё</button>

БЛОГ НА HUSL

Кнопка «показать больше». Как изменить количество скрываемых элементов в зависимости от разрешения экрана?

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