jQuery函数中固定变量保留方法与循环绑定事件变量异常解决

这个问题是JavaScript里非常经典的闭包作用域陷阱，我来帮你把原理和解决方案说清楚：

问题根源 #

你用var声明的变量i是函数级作用域，整个循环过程中只会创建一个i的引用。当你点击按钮的时候，循环早就执行完了，此时i的值已经变成了8（因为循环条件是i <=7，最后一次循环后i会自增到8才退出），所以所有按钮的点击事件都会引用这个最终的i值，导致显示错误。

你已经找到的最优解：用let替代var #

把var改成let是ES6之后最简洁的解决方案，因为let是块级作用域，每次循环迭代都会创建一个全新的i变量，每个按钮的点击回调函数捕获的都是当前迭代的那个i，自然就能正确显示对应的按钮编号：

for (let i = 1; i <= 7; i++) { 
  $("#button" + i).click(function() { 
    $("#result").html("Button " + i + " was clicked."); 
  }); 
}

其他兼容旧环境的替代方案 #

如果你的项目需要兼容不支持ES6的旧浏览器，还有两种常用的解决办法：

1. 立即执行函数表达式（IIFE） #

通过IIFE为每次循环创建独立的作用域，把当前的i值传递进去，让回调函数引用这个独立作用域里的变量：

for (var i = 1; i <= 7; i++) { 
  // 用IIFE创建独立作用域，保存当前循环的i值
  (function(currentButtonNum) {
    $("#button" + currentButtonNum).click(function() { 
      $("#result").html("Button " + currentButtonNum + " was clicked."); 
    }); 
  })(i); // 把当前的i作为参数传入
}

2. 利用jQuery的data()方法绑定数据 #

把按钮对应的编号直接绑定到元素的自定义数据属性上，点击时再从元素上读取这个值，完全避开作用域的问题：

for (var i = 1; i <= 7; i++) { 
  $("#button" + i)
    .data("buttonNumber", i) // 把编号存在元素的data属性里
    .click(function() { 
      // 点击时从当前按钮读取绑定的编号
      var buttonNum = $(this).data("buttonNumber");
      $("#result").html("Button " + buttonNum + " was clicked."); 
    }); 
}

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