0

以下のコードは常に undefined を返します。どうしてこれなの？イベントリスナーがインデックスの文字列で応答するようにします。

ありがとう

var array = ["Hey", "Hi", "Hello"];

for (var i = 0; i < array.length; i++) {
  var box = document.createElement("div");
  box.className = "box";
  box.addEventListener("click", function() {
    alert(array[i]);
  }, false);
}
4

3 に答える 3

2

これはよく聞かれます。JavaScript にはブロック スコープがありません。変数のスコープは、関数を呼び出したときにのみ作成されます。そのため、現在のループ反復にスコープをi設定するには、ハンドラーも作成する関数呼び出しで参照する必要があります。

// Create a function that returns a function
function createHandler(i) {
    // The value of `i` is local to this variable scope

    // Return your handler function, which accesses the scoped `i` variable
    return function() {
        alert(array[i]);
    }
}

var array = ["Hey", "Hi", "Hello"];

for (var i = 0; i < array.length; i++) {
  var box = document.createElement("div");
  box.className = "box";

  // Invoke the `createHandler`, and pass it the value that needs to be scoped.
  // The returned function will use its reference to the scoped `i` value.
  box.addEventListener("click", createHandler(i), false);
}

トレンディなインライン関数呼び出しの代わりに、名前付き関数を使用することを強くお勧めします。より効率的である可能性があり、関数名は関数の目的に関するドキュメントを提供します。

于 2013-07-26T18:16:46.123 に答える
0

おそらく最も簡単な解決策は次のとおりです。

box.addEventListener("click", alert.bind(window, array[i]), false);

しかし、これは IE<9 では機能しません。

于 2013-07-26T18:26:51.227 に答える