javascript - 配列を反復処理する際のJSループ位置

Question

重複の可能性：
ループ内のJavascriptクロージャ-簡単な実用例

リストアイテムの配列を反復処理しながら、配列内のホバー位置を出力したいと思います。ただし、ループが完了するまでに「i」は常に配列の長さに設定されるため、私のロジックは完全に間違っています。そのため、配列内の目的の位置ではなく、常に配列の長さの値を取得します。

それぞれのリストアイテム番号を含むアラートを受け取る必要があります。

HTML

<ul>
    <li class='listItem'>listitem1</li>
    <li class='listItem'>listitem2</li>
    <li class='listItem'>listitem3</li>
</ul>

JS

var arr = document.getElementsByClassName('listItem');
for (var i = 0; i < arr.length; i++) {
    arr[i].onmouseover = function() {
        alert(i);
    }
}

http://jsfiddle.net/EHcDp/4/

前もって感謝します！

Answer 1

var arr = document.getElementsByClassName('listItem');
for (var i = 0; i < arr.length; i++) {
    (function(i) {
        arr[i].onmouseover = function() {
            alert(i);
        }
    }(i));
}

この複製を読んで、これがなぜ/どのように機能するかを調べてください。

Answer 2

閉鎖が必要です：

var arr = document.getElementsByClassName('listItem');
for (var i = 0; i < arr.length; i++) {
    arr[i].onmouseover = (function(x) {
        return function() {
            alert(x);
        };
    }(i));
}