如何实现分页导航（当前页码显示）？解决旧页码未清除问题

问题描述 #

想要实现形如1/5、2/5、3/5……的分页导航：

• 左侧数字为当前页码
• 右侧数字为总页码

目前幻灯片切换功能正常，但当前页码更新时会追加新数字，旧值未被清除，比如多次点击按钮后会出现12/5、123/5这类错误显示。

问题原因 #

原代码中使用current.append(i + 2)更新当前页码，append()方法是将内容追加到元素内部，而非替换原有内容，导致每次点击都会在旧数字后叠加新数字。

修复方案 #

将append()替换为textContent属性赋值，直接覆盖元素原有内容；同时移除未定义的sliceAll()调用，避免报错。

修复后的完整代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="items">
    <div class="item active">111</div>
    <div class="item">222</div>
    <div class="item">333</div>
    <div class="item">444</div>
    <div class="item">555</div>
  </div>
  <br>
  <div class="nav">
    <span class="current">1</span> / 
    <span class="total"></span>
  </div>
  <br>
  <button class="btn" type="button">Next</button>
</body>
</html>

CSS

.item {
  display: none;
}
.item.active {
  display: block;
}

JavaScript

// slides
let item = document.querySelectorAll('.item');
let btn = document.querySelector('.btn');
let el_active;

let current = document.querySelector('.current');
let total = document.querySelector('.total');

function navigate() {
    for (let i = 0, length = item.length; i < length; i++) {
        if (item[i].classList.contains('active')) {
            el_active = i;
            // 替换append为textContent，直接覆盖原有内容
            current.textContent = i + 2;        
            break;
        }
    }
    item.forEach(function(tab) {
        tab.classList.remove('active');
    });
    if ((el_active + 1) === item.length) {
        item[0].classList.add('active');
        // 回到第一页时，重置当前页码为1
        current.textContent = 1;
    } else {
        item[el_active + 1].classList.add('active');
    }
}

btn.addEventListener('click', function() {
    navigate();
    // 移除未定义的sliceAll()调用
});

let all = item.length;
// 用textContent设置总页码，更稳妥
total.textContent = all;

额外优化说明 #

• 当切换到最后一页后点击按钮回到第一页时，手动将当前页码重置为1，保证逻辑闭环；
• 总页码使用textContent赋值，避免后续如果有更新操作时出现重复追加的问题。

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