javascript - 在循环中创建的 jQuery 事件处理程序

Question

所以我有一组这样的事件:

$('#slider-1').click(function(event){   
        switchBanners(1, true);
});
$('#slider-2').click(function(event){   
        switchBanners(2, true);
});
$('#slider-3').click(function(event){   
        switchBanners(3, true);
});
$('#slider-4').click(function(event){   
        switchBanners(4, true);
});
$('#slider-5').click(function(event){   
        switchBanners(5, true);
});

我想通过一个循环来运行它们我已经在运行这样的东西了:

for(i = 1; i <= totalBanners; i++){
    $('#slider-' + i).click(function(event){    
            switchBanners(i, true);
    });
}   

理论上应该可以工作，但一旦我加载文档它似乎就不会...它不会像单击时那样响应任何特定的 div id...无论我单击哪个 div，它都会在每个 div 中前进。我想动态创建更多的事件监听器，但我首先需要这些……

我错过了什么？

Answer 1

这是人们遇到的一个非常普遍的问题。

JavaScript 没有 block 作用域，只有函数作用域。因此，您在循环中创建的每个函数都是在 相同的变量环境 中创建的，因此它们都引用相同的 i 变量。

要在新的变量环境中限定变量的范围，您需要调用一个函数，该函数具有引用您要保留的值的变量(或函数参数)。

在下面的代码中，我们用函数参数j引用它。

   // Invoke generate_handler() during the loop. It will return a function that
   //                                          has access to its vars/params. 
function generate_handler( j ) {
    return function(event) { 
        switchBanners(j, true);
    };
}
for(var i = 1; i <= totalBanners; i++){
   $('#slider-' + i).click( generate_handler( i ) );
}

这里我们调用了 generate_handler() 函数，传入 i，并让 generate_handler() 返回一个函数 引用局部变量 (在函数中命名为 j，但您也可以将其命名为 i)。

只要函数存在，返回函数的变量环境就会存在，因此它将继续引用在创建它的时间/地点环境中存在的任何变量。

---

更新:在 i 之前添加了 var 以确保它被正确声明。