Question

可能重复：
Javascript closure inside loops - simple practical example

我想在迭代列表项数组时输出数组中的悬停位置。然而，我的逻辑是完全错误的，因为＆＃39; i＆＃39;在循环完成时总是设置为数组的长度，因此我总是得到数组长度值而不是数组中所需的位置。

我需要获取包含相应列表项目编号的警报。

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

阅读this duplicate，找出原因/工作原理。

Answer 2

您需要closure：

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

迭代数组时的JS循环位置

2 个答案: