循环迭代至指定次数时添加分页按钮不显示的解决方法

你的代码核心问题是：for...of循环中的i是数组的元素值，而非迭代的索引位置，所以用i === second_product（20、40这类数字）做判断完全不成立，按钮自然不会显示。

要实现每遍历20个元素就创建分页按钮，你需要基于迭代的索引来判断，而非元素值。以下是两种可行的修改方案：

方案一：使用普通for循环（带索引） #

let first_product = 0;
let second_product = 20;
let page_number = 1;

let paginated_products = products.slice(first_product, second_product);

for (let index = 0; index < myArray.length; index++) {
    const element = myArray[index];
    // 这里执行你需要的元素处理逻辑

    // 索引从0开始，第20个元素的索引是19，所以用(index + 1)匹配目标次数
    if ((index + 1) === second_product) {
        let button = document.createElement('button');
        button.innerHTML = page_number;
        page_number += 1;
        document.getElementById('nav-buttons').appendChild(button);
        first_product += 20;
        second_product += 20;
    }
}

方案二：使用forEach循环（带索引参数） #

let first_product = 0;
let second_product = 20;
let page_number = 1;

let paginated_products = products.slice(first_product, second_product);

myArray.forEach((element, index) => {
    // 这里执行你需要的元素处理逻辑

    if ((index + 1) === second_product) {
        let button = document.createElement('button');
        button.innerHTML = page_number;
        page_number += 1;
        document.getElementById('nav-buttons').appendChild(button);
        first_product += 20;
        second_product += 20;
    }
});

额外说明 #

如果你的数组长度不是20的整数倍，最后一页不足20个元素时，上述代码不会创建对应按钮。如果需要为最后一页也生成按钮，可以在循环结束后额外判断并创建。

内容的提问来源于stack exchange，提问作者user21194080