javascript - 如何使用 vanilla JS 将 'load more' 功能添加到页面上的项目？

Question

我正在尝试在页面上的某些项目上设置“加载更多”功能。最初，我发现这是用 jQuery 完成的。我正在尝试转换此 jQuery:

$(document).ready(function () {
  $(".news-item").slice(0, 9).removeClass('hidden');
  $("#loadMore").click(function (e) {
    e.preventDefault();
    $(".news-item:hidden").slice(0, 6).removeClass('hidden').fadeIn("slow");

    if ($(".news-item:hidden").length == 0) {
      $("#loadMore").fadeOut("slow");
    }
  });
})

...进入普通 js: 这就是我已经走了多远...但是，我无法加载额外的项目。

const hiddenItems = document.querySelectorAll('.hidden');
const loadMore = document.getElementById('loadmore');

document.querySelectorAll('.news-item:nth-child(-n+9)').forEach(
  elem => elem.classList.remove('hidden')
);

loadmore.addEventListener('click', function(e) {
  e.preventDefault();
  document.querySelectorAll('.news-item:hidden:nth-child(-n+6)').forEach(
    elem => elem.classList.remove('hidden')
  )
  if (hiddenItems.length == 0) {
    loadMore.classList.add('hidden');
  }
});

const hiddenItems = document.querySelectorAll('.hidden');
const loadMore = document.getElementById('loadmore');

document.querySelectorAll('.news-item:nth-child(-n+9)').forEach(
  elem => elem.classList.remove('hidden')
);

loadmore.addEventListener('click', function(e) {
  e.preventDefault();
  document.querySelectorAll('.news-item:hidden:nth-child(-n+6)').forEach(
    elem => elem.classList.remove('hidden')
  )
  if (hiddenItems.length == 0) {
    loadMore.classList.add('hidden');
  }
});

.hidden {
  display: none;
}

<div id="container">
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <button type="button" id="loadmore">Load More</button>
</div>

Answer 1

我一直在尝试通过 :nth-child() 方法来做到这一点，但我无法做到。它也选择那些不再隐藏的。

所以我用splice来实现，类似于使用slice的jQuery。这里:

const loadMore = document.getElementById('loadmore');
const hid = [...document.querySelectorAll('.news-item.hidden')];

hid.splice(0, 9).forEach(
  elem => elem.classList.remove('hidden')
);

loadmore.addEventListener('click', function(e) {
  e.preventDefault();
  
  hid.splice(0, 6).forEach(
    elem => elem.classList.remove('hidden')
  )
  
  if (hid.length == 0) {
    loadMore.classList.add('hidden');
  }
});

.hidden {
    display: none;
}

<div id="container">
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <div class="news-item hidden">News Item</div>
  <button type="button" id="loadmore">Load More</button>
</div>