Question

关注我的代码：

for(var i =0; i < document.getElementById('test').getElementsByTagName("li").length; i++){                                  
    document.getElementById('test').getElementsByTagName("li")[i].onmouseover= function(){
    alert(document.getElementById('test').getElementsByTagName("li")[i].innerHTML);
    }
}

HTML：

<div id="test">
    <ul><li>test</li><li>test2</li><li>test3</li><li>test4</li></ul>
</div>

JSfiddle：http://jsfiddle.net/Pwddf/1/

“i”始终分配最后一个值，然后不起作用。怎么解决？

Answer 1

问题在于范围界定。如果在循环内部创建函数，则循环变量将始终具有其最后的循环值。基本上，循环执行，但函数声明中的变量在调用函数之前不会被计算，此时“i”等于最后一个值。您可以使用闭包来立即解决变量。

for(var i =0; i < document.getElementById('test').getElementsByTagName("li").length; i++){
    (function(i) {                                  
        document.getElementById('test').getElementsByTagName("li")[i].onmouseover= function(){
            alert(document.getElementById('test').getElementsByTagName("li")[i].innerHTML);
        };
    })(i);
}

我同意tymeJV你应该先存储你的元素，而不是重新选择它们。

Answer 2

您希望querySelectorAll代替：

var elems = document.querySelectorAll("#test ul li");
for (var i = 0; i < elems.length; i++) {
    elems[i].onmouseover = function() {
        console.log("See?");
    }
}

如果您确实需要i值，请在for内使用闭包：

(function(i) {
    elems[i].onmouseover = function() {
        console.log("See?" + i);
    }
})(i)

演示：http://jsfiddle.net/Pwddf/2/

Answer 3

这是一个非常简洁的解决方案，适用于Firefox和IE9中的jsfiddle：

var elems = document.getElementById("test").getElementsByTagName("li");
for(var i =0; i < elems.length; i++){
    elems[i].onmouseover= function(e){
       console.log(this.innerHTML);
       console.log(e);
    }
}

http://jsfiddle.net/8LyhN/1/

我不建议您在mouseover事件中计划做什么，我建议您传递这个事件，以便将其引用为“e”。

Answer 4

您需要缓存i;

    for(var i =0; i < document.getElementById('test').getElementsByTagName("li").length; i++)
    {   
       var _i = i;                            
        document.getElementById('test').getElementsByTagName("li")[i].onmouseover= function()
        {

        alert(document.getElementById('test').getElementsByTagName("li")[_i].innerHTML);
        }
    }

//更好;

var elements = document.getElementById('test').getElementsByTagName("li");
for(var i =0; i < elements.length; i++)
{                                  
    elements[i].addEventListener('mouseover', function()
    {
    alert(this.innerHTML);
    });
}

Answer 5

如果你真的想使用javascript而不是JQuery，你应该这样做。

var ul = document.getElementById("test");
var li = ul.getElementsByTagName("li");

for(var i =0; i <li.length; i++){                                   
    li[i].onmouseover= function(){
        alert(this.innerHTML);
    }
}

点击此处：http://jsfiddle.net/alaminopu/Pwddf/5/

FOR - getElementByName和i值

5 个答案: