jQuery在两个函数中传递参数为变量却返回undefined的问题排查

看起来你遇到了前端开发里很常见的循环绑定事件的变量作用域问题，我来帮你理清楚原因和解决办法：

问题本质 #

当你在for循环里用var声明循环变量i时，i是函数作用域的变量——也就是说整个循环里只有一个i变量，所有绑定的事件回调函数都会共享这个i。当循环执行完后，i的值会变成trackingIds.length（循环结束的条件），这时候用户触发点击/悬停事件时，回调里访问的trackingIds[i]自然就是undefined了。

而你在循环执行过程中直接打印el_id和trackingIds[i]能拿到正确值，是因为那时候i刚好处于当前迭代的有效值范围内。

几种可行的解决方案 #

1. 使用ES6的let声明循环变量（推荐） #

let是块级作用域的变量，每个循环迭代都会创建一个独立的i，事件回调会绑定当前迭代的i值：

for (let i = 0; i < trackingIds.length; i++) {
  const element = document.getElementById(el_id);
  // 点击事件
  element.addEventListener('click', function() {
    console.log('点击的trackingId:', trackingIds[i]);
  });
  // 悬停事件
  element.addEventListener('mouseover', function() {
    console.log('悬停的trackingId:', trackingIds[i]);
  });
}

2. 用立即执行函数(IIFE)创建闭包保存变量 #

如果你的环境不支持ES6，可以用闭包把当前迭代的i值“固定”下来：

for (var i = 0; i < trackingIds.length; i++) {
  // 用IIFE包裹，把当前i作为参数传入，创建独立作用域
  (function(currentIndex) {
    const element = document.getElementById(el_id);
    element.addEventListener('click', function() {
      console.log('点击的trackingId:', trackingIds[currentIndex]);
    });
    element.addEventListener('mouseover', function() {
      console.log('悬停的trackingId:', trackingIds[currentIndex]);
    });
  })(i);
}

3. 使用forEach循环遍历数组 #

forEach的回调函数自带独立作用域，每个迭代的索引和值都是独立的，代码也更简洁：

trackingIds.forEach(function(trackingId, index) {
  // 如果el_id和trackingId对应，这里可以直接用trackingId获取元素
  const element = document.getElementById(el_id);
  element.addEventListener('click', function() {
    console.log('点击的trackingId:', trackingId); // 直接用当前迭代的trackingId更直观
  });
  element.addEventListener('mouseover', function() {
    console.log('悬停的trackingId:', trackingId);
  });
});

额外提示 #

如果你的el_id其实就是trackingIds数组里的元素（比如数组存的是元素ID），那可以直接用trackingId来获取DOM元素，这样能避免循环中el_id不匹配的问题，代码也更准确。

内容的提问来源于stack exchange，提问作者digitalsuite.net