3

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

我有一些这样的代码

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]); });
}

这应该绑定 divid="blah0"以在单击时将所有图像更改为'blah.jpg'。同样，单击 divid ="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”。

4

4 回答 4

5

在函数中声明一个新变量，该变量创建一个新的单击处理程序，该处理程序将 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 副本，每次都不会更改。

于 2008-11-21T03:55:44.960 回答
4

在这种特殊情况下，您应该使用闭包：

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

(function(){ /* code */ })()表示一个自执行函数，这意味着它将在循环中立即使用和评估 i 的值，而不是在点击时。

于 2008-11-21T04:53:06.203 回答
0

在循环中再添加 1 个变量，并在闭包中使用它后将其递增。


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

    j++;
}
于 2008-11-21T03:53:24.543 回答
0

到目前为止我有这个答案，但有点破解：

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

还：

for (var i=0; i<10; i++)
{
    eval("$('div#blah'+i).click(function() { alert(" + i + ")); });");
}
于 2008-11-21T04:03:04.680 回答