我创建了一个对象数组。这个数组包含了数千个对象。
例如:
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中完成
1条答案
按热度按时间laawzig21#
这个应该可以。你必须把当前的页码放在
currentPageNumber
中。不幸的是我不能给予你其他的部分,因为我不知道你的代码。