0

私は問題のjsfiddleを作りました

http://jsfiddle.net/XXVAP/

問題は、クリックしたアイテムが最後のID（10）を表示し続けることです

これは私を夢中にさせています！ヘルプ

4

2 に答える 2

3

これは、事前定義された変数にアラートを送信しているためです。forループでは、id変数の値を更新しています。最後の反復では、値はになり10、各要素のクリックハンドラーでこの変数に警告しています。使用する必要がありますthis.id：

alert(this.id);

http://jsfiddle.net/2dfkh/

コード内のイベントは。であることに注意してくださいundefined。

于 2012-10-14T13:43:03.457 に答える
1

問題はこれに減らすことができます...

var l = 10;
for(var i = 0; i < l; ++i) {
    $("#item-" + i).click(function() {
        alert(i);
    });
}

クリック関数の内容は、ループを通過するときに評価されません。代わりに、要素をクリックすると、その関数が実行さiれ、その時点で何でもアラートが表示されます...この場合は10になります。あなたが多くのことをすることができる時の価値の。

値をデータ項目として要素に渡します。

var l = 10;
for(var i = 0; i < l; ++i) {
    $("#item-" + i).data("id", i).click(function() {
        alert($(this).data("id"));
    });
}

内部エンクロージャーを作成します。トリッキーに見えますが、クリックハンドラー関数を返すのはすぐに呼び出される関数だけです。

var l = 10;
for(var i = 0; i < l; ++i) {
    $("#item-" + i).click((function(n) {
        return function() {
            alert(n);
        }
    })(i));
}

あなたもそれを書くことができます...

function handler(n) {
    return function() {
        alert(n);
    }
}
var l = 10;
for(var i = 0; i < l; ++i) {
    $("#item-" + i).click(handler(i));
}

または、バインド全体を新しい関数として実行することもできます...

function bindElement(n) {
    $("#item-" + n).click(function() {
        alert(n);
    });
}
var l = 10;
for(var i = 0; i < l; ++i) {
    bindElement(i);
}

注： W3Cの仕様では、IDを数字で始めてはならないことが規定されています。http：//www.w3.org/TR/html401/types.html#type-name 6.2、箇条書き2. HTMLを有効にするには、その先頭に追加する必要があります文字列で。

これは、さまざまなソリューションを示すフィドルですhttp://jsfiddle.net/XXVAP/8/

于 2012-10-14T13:55:36.350 に答える