如何在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"以将所有图像更改为'blah.jpg'单击时.同样,单击div id ="blah1"应将所有图像更改为'ha.jpg'.

但是,匿名函数将无法工作,因为它将在执行时使用'i'的值,即2.这意味着单击div将尝试将所有图像设置为arr [2] - 不存在元素(有趣的是不会在我的机器上抛出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副本,每次都不会更改.