使用闭包在 for 循环中动态添加点击函数答案

【问题标题】：Add a click function dynamically within a for loop using closure使用闭包在 for 循环中动态添加点击函数
【发布时间】：2012-01-23 17:25:53
【问题描述】：

我正在尝试创建一个动态手风琴。我的问题是我似乎无法在 for 循环中获得对 i 变量的引用。我知道这是一个范围问题，但我认为这个关闭会解决问题....请有人帮帮我，因为这让我完全发疯了。

jQuery(function(){

  var tables = jQuery('table');
  var tableHeadings = jQuery('h3');

  for(i =0 , ii = tableHeadings.length; i < ii; i++){
     (function(){ 

        var index = i;
        tables.eq(index).addClass('table-' + index);

        tableHeadings.eq(index).click(function(){   
            tables.eq(index).slideToggle(); 
        });

      })();
    }  
});

【问题讨论】：

你有一个失败的例子吗？这应该可以正常工作。
你为什么需要在这里关闭？直接执行for循环中的代码即可。
@asawyer：因为否则在点击处理程序中，i（或index）将始终是最后一个值。
@Matt 啊，我明白了。那为什么不用$("h3").each(function(i,e){ ... });，而不是笨拙的for循环呢？
@asawyer：那也行，必须问`@RobertRubyII 为什么他选择不使用它:)。

标签： for-loop click closures jquery

【解决方案1】：

更好：

tableHeadings.each(function(index, element) {
  tables.eq(index).addClass('table-' + index);

  tableHeadings.eq(index).click(function() {   
    tables.eq(index).slideToggle(); 
  });
});

【讨论】：

不知道使用tableHeadings.eq(index) 或$(this) 是否更好
好点。我只是复制粘贴了正文，但你是对的。这是一个不太直接的情况，因为需要关联 tables 和 tableHeadings - 我可能会重构 DOM 以将它们保持在一起，也许包装在 DIV 中，然后使用包装器作为选择器和循环变量。