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

これにより、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」などと表示されます。

ただし、デフォルトでは、どの「何とか」をクリックしても「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

私はこれまでのところこの答えを持っていますが、ちょっとしたハック:

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 に答える
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 に答える