我创建了一个对象数组。这个数组包含了数千个对象。
例如：

let products = [
{name: "Name 1"},
{name: "Name 2"},
{name: "Name 3"},
{name: "Name 4"},
{name: "Name 5"}]

对于每个对象，我都使用以下代码创建了一张卡片：

for (let i of products) {

  //Create Card
  let card = document.createElement("div");
  //Card should have category and should stay hidden initially
  card.classList.add("card", i.category, "hide");
  // Add name to card
  let name = document.createElement("h1");
  name.innerText = i.name();

  card.appendChild(name);
  document.getElementById("products").appendChild(card);
}

我动态地对这些对象进行了分页，使每页最多只显示100张卡片。我使用以下代码完成了这一操作：

let itemsPerPage = 100;
function loadPageNav() {
  for (let i = 0; i < items.length / itemsPerPage; i++) {
    const button = document.createElement('button');
    button.classList.add('btn');
    button.innerHTML = i + 1;
    button.addEventListener('click', (e) => {
      pageIndex = e.target.innerHTML - 1;
      loadItems();
    });
    nav.append(button);
  }
}

这可以正常工作。但是，页面上的按钮太多。如果我在第10页，所有按钮都会显示。但是，我只想显示包含第8页到第12页的按钮。
按钮当前如下所示：How the buttons look now
但是，按钮应如下所示：How the buttons should look
如何隐藏不需要显示的按钮？
这需要在Vanilla JavaScript中完成