jQuery中for循环访问数组时点击事件返回undefined问题

嘿，这个坑我之前踩过！问题出在你用var声明循环变量i的作用域上，咱们来拆解一下：

为什么会返回undefined？ #

var声明的变量是函数级作用域，整个buttonDetails函数里只有一个i变量。当循环执行完后，i的值已经变成了buttonIdArray.length（也就是2）。等你点击按钮触发事件时，函数里访问的是这个已经变成2的i，而textArray[2]不存在，自然就返回undefined了。

几种可行的解决方案 #

1. 用let代替var（最简洁的现代方案）

let是ES6新增的，它是块级作用域，每次循环都会创建一个独立的i变量，点击事件里捕获的是当前循环迭代的那个i值：

var buttonIdArray = ['#one', '#two']
var textArray = ['this is button one', 'this is button two']
function buttonDetails() {
  for (let i = 0; i < buttonIdArray.length; i++) {
    $(buttonIdArray[i]).click(function() {
      window.alert(textArray[i])
    })
  }
}

2. 使用立即执行函数(IIFE)创建独立作用域

如果需要兼容ES6之前的环境，可以用IIFE把每次循环的i值封装到独立作用域里：

var buttonIdArray = ['#one', '#two']
var textArray = ['this is button one', 'this is button two']
function buttonDetails() {
  for (var i = 0; i < buttonIdArray.length; i++) {
    // 用IIFE保存当前循环的i值
    (function(index) {
      $(buttonIdArray[index]).click(function() {
        window.alert(textArray[index])
      })
    })(i)
  }
}

3. 用forEach遍历数组

forEach的回调函数自带独立作用域，每个迭代的索引都是独立的，写法也很清晰：

var buttonIdArray = ['#one', '#two']
var textArray = ['this is button one', 'this is button two']
function buttonDetails() {
  buttonIdArray.forEach(function(id, index) {
    $(id).click(function() {
      window.alert(textArray[index])
    })
  })
}

总结 #

优先推荐用let或者forEach的方案，代码更简洁易读，也符合现代JavaScript的写法。

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