3

これはおそらく簡単な質問ですが、私はそれに対する最良の答えを見つけることができません.

画面上に 10 個<div>の要素があります。それぞれにclick()イベント リスナーがあります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <div id="element0">Click me! (0)</div>
    <div id="element1">Click me! (1)</div>
    <div id="element2">Click me! (2)</div>
    <div id="element3">Click me! (3)</div>
    <div id="element4">Click me! (4)</div>
    <div id="element5">Click me! (5)</div>
    <div id="element6">Click me! (6)</div>
    <div id="element7">Click me! (7)</div>
    <div id="element8">Click me! (8)</div>
    <div id="element9">Click me! (9)</div>
    <script type="text/javascript">
    for ( var i = 0; i < 10; i++ ) {
        var element = document.getElementById( "element" + i );
        element.onclick = function () {
            alert( "Element " + i );
        }
    }
    </script>
</body>
</html>

しかし、要素をクリックするたびに、「要素 10」と表示されます。これらのイベント ハンドラーはすべて、 に対して同じ値を使用しているようですi。

Nが現在の要素の番号である「要素N」を表示したい。要素 ID から N を抽出したくありません。data()jQueryのメソッドを使って保存したくありません。この問題にはもっと簡単な解決策があるに違いないと思いますが、見つかりません。誰？

4

3 に答える 3

6

iすべてのクリック ハンドラーで共有される外側のスコープには、1 つの変数しかありません。iクロージャーごとにローカル変数を作成する必要があります。これはうまくいきます：

for ( var i = 0; i < 10; i++ ) {
    var element = document.getElementById( "element" + i );
    element.onclick = (function(i){
        // returns a new function to be used as an onclick handler
        return function () {
            alert( "Element " + i );
        }
    })(i); // Pass in the value of the outer scope i
}

詳細については、この記事の「悪名高いループ」の問題を確認してください(記事全体をお読みください)。

于 2012-05-18T16:32:26.310 に答える
3

あなたの問題は、他の投稿が言ったように、ループ内で非同期コードを実行することの性質です。あなたの場合、この問題を解決するためのより良い方法があり、それはイベント委任を使用しています。

document.body.onclick = function(e) {
  if (e.target.tagName.toLowerCase() === "div") {
    alert( "Element " + e.target.id );
  }
}

jQueryがあれば、これを行うことができます：

$(document.body).on("click", "div", function() {
  alert($(this).attr("id"));
});

詳細については、次の記事をご覧ください: http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/

明らかに、jQuery やその他のライブラリもこのような処理を自動的に行います。

于 2012-05-18T16:38:25.077 に答える
2

要素のid属性から数値を取得できます。

for ( var i = 0; i < 10; i++ ) {
    var element = document.getElementById( "element" + i );
    element.onclick = function () {

        var i = this.id.substr(7);
        alert( "Element " + i );
    }
}​

ここで JsFiddle。

于 2012-05-18T16:39:43.737 に答える