JavaScript分页页码功能异常，点击页码1控制台输出3求助

你遇到的核心问题是循环绑定事件时的闭包陷阱，咱们一步步拆解问题并修复：

问题根源 #

你用var声明的pagination是函数级作用域变量，整个循环里共用同一个变量引用。当你给每个页码绑定点击事件时，回调函数并没有立即执行——等你点击页码的时候，循环早就跑完了，此时pagination的值已经变成了3（因为总页数是2，循环到pagination=2执行完后，pagination++变成3，不再满足pagination <= pages的条件，循环退出）。所以不管点哪个页码，都会拿到这个最终的3。

修复方案 #

有两种简单的解决方式，选一种就行：

方案1：用let代替var声明循环变量

let是块级作用域，每次循环都会创建一个独立的pagination变量，每个点击回调都会捕获到当前循环对应的那个值：

function createPagination() {
  // ... 其他代码保持不变
  for(let pagination = 1; pagination <= pages; pagination++) { // 把var改成let
    var number = document.createElement('a');
    number.setAttribute('href', '');
    number.innerHTML = pagination;
    number.addEventListener('click', function(event) {
      event.preventDefault();
      changePagination(pagination);
      console.log(pagination); // 现在会输出正确的页码了
    });
    paginator.appendChild(number);
  }
  // ... 其他代码保持不变
}

方案2：用立即执行函数（IIFE）保存变量

如果需要兼容不支持ES6的旧浏览器，可以用IIFE创建闭包，把每次循环的页码值单独存起来：

function createPagination() {
  // ... 其他代码保持不变
  for(var pagination = 1; pagination <= pages; pagination++) {
    // 用IIFE包裹，把当前pagination作为参数传入
    (function(pageNum) {
      var number = document.createElement('a');
      number.setAttribute('href', '');
      number.innerHTML = pageNum;
      number.addEventListener('click', function(event) {
        event.preventDefault();
        changePagination(pageNum);
        console.log(pageNum); // 输出正确的页码
      });
      paginator.appendChild(number);
    })(pagination);
  }
  // ... 其他代码保持不变
}

额外的小问题修正 #

另外注意你的changePagination函数里有个潜在bug：

var start = ((pagination - 1) * pageSize) + 1;
if(pagination === 1) {
  ini = 0; // 这里ini是未声明的变量，而且没用到？
}

这里的start计算多了+1，因为数组的slice方法是从0开始索引的，当页码是1时，(1-1)*10 +1 =1，会跳过数组的第一个元素。应该改成：

var start = (pagination - 1) * pageSize; // 去掉+1
// 不需要那个if判断，因为页码1时start就是0，正好对应第一个元素

还有，每次切换页码时，记得先清空之前渲染的列表内容，否则新数据会追加在旧数据后面，导致重复展示。比如在循环调用createObject之前，先清空列表容器：

// 假设你的列表容器id是"list-container"
document.getElementById('list-container').innerHTML = '';
for(var i = 0; i < arr.length; i++) {
  createObject(arr[i]);
}

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