javascript - 如何在 JavaScript 匿名函数的声明时使用变量的值？

Question

这是一个非常基本的问题，但是......

我有这样的代码

var arr = Array('blah.jpg','ha.jpg');
for (var i=0; i<array.length; i++)
{
    $('div#blah' + i).click(function() {
           $('img').attr('src', arr[i]); });
}

这应该将 div 与 id="blah0" 绑定(bind)，以便在单击时将所有图像更改为 'blah.jpg'。同样，单击带有 id ="blah1" 的 div 应该将所有图像更改为 'ha.jpg'。

但是，匿名函数将不起作用，因为它将在执行时使用“i”的值，即 2。这意味着单击任一 div 将尝试将所有图像设置为 arr[2] - a不存在的元素(有趣的是没有在我的机器上抛出 JS 错误，但那是另一个故事......)。

如何在声明时使用“i”的值创建匿名函数？

举个简单的例子:

for (var i=0; i<10; i++)
{
    $('div#blah'+i).click(function() {
       alert(i)); });
}

当我点击“blah0”时应该显示“0”，当我点击“blah1”时应该显示“1”等等。

但是，默认情况下，无论我点击哪个“blah”，它都会显示“10”。

Answer 1

在函数内声明一个新变量，该函数创建一个新的点击处理程序，该处理程序获取 i 的当前值作为参数:

function makeClickHandler(arr, local_i) {
    return function() {
        $('img').attr('src', arr[local_i]);
    };
}

var arr = Array('blah.jpg','ha.jpg');
for (var i=0; i<array.length; i++)
{
    $('div#blah' + i).click(makeClickHandler(arr, i));
}

函数的每个实例都有自己的 local_i 副本，每次都不会改变。