2

我有一个包含 3 个链接的列表，我想遍历这些链接，因此每个链接都可以做某事。但是当我使用for循环时，它只会3在控制台中给我，这是列表中的链接数。我希望控制台像这样显示他们每个人：0, 1, 2;

另外如何获得每个链接的索引位置？

在这里查看代码：http: //jsfiddle.net/c8Wdj/

请不要使用 jQuery 或任何库...

JavaScript：

(function(){
    var triggers = document.getElementById('some-list').getElementsByTagName('a');

    for (var i = 0, max = triggers.length; i < max; i += 1) {
        triggers[i].addEventListener('mouseenter', function(e) {

            console.log(i);

        }, false);
    }

}());

HTML：

<ul id="some-list">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>​

​</p>

4

2 回答 2

3

for 没有范围，因此当您使用 console.log(i) 时，它使用 i 的最新值。试试这个：

for (var i = 0, max = triggers.length; i < max; i += 1) {
    (function(num){
        triggers[i].addEventListener('mouseenter', function(e) {
            console.log(num);
        }, false);
    })(i);
}
于 2012-05-26T16:45:42.700 回答
0

一种常见的方法是在循环的每次迭代中创建一个新的变量范围，方法是调用一个函数，传递i给它，然后返回一个引用该值的函数。

但是，如果您只需要引用一些轻量级数据（如数字），另一种方法是简单地在元素上放置一个 expando 属性。

for (var i = 0, max = triggers.length; i < max; i += 1) {
    triggers[i].__i__ = i;
    triggers[i].addEventListener('mouseenter', function(e) {
        console.log(this.__i__);
    }, false);
}

这不需要嵌套变量范围的开销。

演示：http: //jsfiddle.net/c8Wdj/5/

可能是 IE6 的问题（我不记得了），但这无关紧要，因为您希望不再支持它的 JS 环境。:)

于 2012-05-26T16:59:36.890 回答