为何jQuery的eq(i)方法无法正常工作？求解决方案

嘿，我之前也踩过这个坑！这是JavaScript循环里闭包作用域导致的经典问题——当你用var声明循环变量i时，它是函数级作用域，整个循环共享同一个i变量。等你的点击事件触发时，循环早就跑完了，i已经变成了循环结束的最终值（也就是按钮的总数），这时候用eq(i)自然找不到对应的容器，所以完全没效果；而你硬写eq(0)时，每次都精准定位第一个容器，所以能正常工作。

下面给你几种靠谱的解决方案，挑你顺手的用就行：

1. 用let替代var（最简单的现代JS写法） #

let有块级作用域，每次循环都会创建一个独立的i变量，绑定到当前的点击事件回调里，完美解决作用域问题：

const btns = $('.btn');
const containers = $('.container');

for (let i = 0; i < btns.length; i++) {
  btns.eq(i).on('click', function() {
    containers.eq(i).toggle();
  });
}

2. 用jQuery的each()方法（最贴合jQuery风格） #

jQuery的each()会自动给你传递当前元素的索引，不用自己处理循环变量的问题，代码更简洁：

$('.btn').each(function(index) {
  $(this).on('click', function() {
    $('.container').eq(index).toggle();
  });
});

3. 用闭包包裹（兼容旧版JS的写法） #

如果需要兼容不支持ES6的环境，可以用立即执行函数（IIFE）创建闭包，把当前循环的索引保存下来：

var btns = $('.btn');
var containers = $('.container');

for (var i = 0; i < btns.length; i++) {
  // 把当前的i作为参数传入IIFE，保存为独立的index变量
  (function(index) {
    btns.eq(index).on('click', function() {
      containers.eq(index).toggle();
    });
  })(i);
}

4. 事件委托（推荐用于动态生成的元素） #

如果你的按钮是通过AJAX动态加载的，上面的方法可能会失效，这时候用事件委托更高效——把点击事件绑定到父容器上，通过事件冒泡来处理：

// 这里用document做父容器，建议换成更具体的父元素（比如按钮的直接父div）
$(document).on('click', '.btn', function() {
  // 获取当前点击按钮的索引
  const btnIndex = $('.btn').index(this);
  $('.container').eq(btnIndex).toggle();
  
  // 或者如果按钮和容器是对应层级的（比如同属一个父元素），可以用相对定位更高效：
  // $(this).closest('.item').find('.container').toggle();
});

这些方法都能解决你遇到的索引识别问题，根据你的实际场景选就行～

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