JavaScript实现分页时第1页隐藏按钮、第2页及以上显示

• 核心操作逻辑错误：document.getElementById("pagination") 返回的是页面中分页DOM元素的内存引用，直接给这个返回值赋值空字符串，本质是修改了这个变量的指向，和实际渲染在页面上的分页元素没有任何关系。类比一下，你把手机里存的朋友联系方式删成空白，朋友本人根本不会受到任何影响，自然达不到修改页面的效果。
• 逻辑触发覆盖不全：原代码的显隐判断只绑定在上一页的点击事件里，既没有在页面初始化时做第一页的隐藏判断，也没有覆盖下一页点击、页码跳转等其他会改变页码的场景，很容易出现分页显隐状态和当前页码不匹配的问题。

封装公共显隐逻辑 #

把分页的显隐判断抽成独立的公共方法，所有涉及页码变化的场景统一调用，避免逻辑漏写：

// 已有的全局页码变量
let page = 1;

function togglePaginationVisibility() {
  // 获取分页DOM元素
  const paginationEl = document.getElementById("pagination");
  // 第一页时设置为隐藏，非第一页恢复默认显示
  paginationEl.style.display = page === 1 ? 'none' : '';
}

修正原有上一页函数的逻辑 #

原函数的判断分支错位，修正后：

function previous() {
  // 只有当前页码大于1时，才执行页码递减逻辑
  if (page > 1) {
    page = page - 1;
    search();
    // 页码更新完成后同步刷新分页显隐状态
    togglePaginationVisibility();
  }
}

补齐必要的触发调用 #

两个容易遗漏的调用点：

• 页面加载完成时，先执行一次togglePaginationVisibility()，保证初始处于第一页时，分页自动隐藏
• 下一页点击、搜索后跳页等其他会修改page值的逻辑里，在页码更新完成后同样调用togglePaginationVisibility()，保证全场景下显隐状态和页码保持一致

• 不要用innerHTML = ''的方式做隐藏，这种操作会直接删掉分页区域的所有HTML结构，后续要显示的时候还得重新拼接DOM，维护成本很高，直接修改display属性是最轻量的实现方式
• 不要把显隐判断零散写在各个点击事件里，一旦后续新增了改变页码的入口，很容易出现状态不同步的bug，抽成公共方法统一调用最稳妥

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