Javascript undefined variable 错误

Question

Possible Duplicate:
Event handlers inside a Javascript loop - need a closure?

我想简单地将 onclick 事件分配给一系列 li无序列表中的元素。而不是通过定义大量唯一 ID 并手动将事件添加到每个 li 来以困惑的方式进行操作。我想用 for 以编程方式执行此操作循环。

html:

<ul id="homeNav">
    <li><a title="Back to home page" href="">home</a></li>
    <li><a title="Play" href="">play</a></li>
    <li><a title="About the site?" href="">about</a></li>
    <li><a title="Latest development news and info." href="">dev blog</a></li>
    <div class="clear"></div>
</ul>

Javascript:

window.onload = function()
{
    var parentList = document.getElementById('homeNav');
    var listItems = parentList.getElementsByTagName('li');
    var numItems = listItems.length;
    for(var i = 0; i < numItems; i++)
    {
        listItems[i].onmouseover = function()
        {
            listItems[i].getElementsByTagName('a')[0].style.color = 'blue';
        }
        listItems[i].onmouseout = function()
        {
            listItems[i].getElementsByTagName('a')[0].style.color = '#cccccc';
        }
    }
}

我收到错误 listItems[i] is undefined

对我来说，该事件实际上是在寻找 i索引变量，而不是使用在将事件添加到触发器时分配给它的编号，或者可能是 i变量不在闭包的范围内？

Answer 1

该变量在事件中不可用，您可以使用this..

for(var i = 0; i < numItems; i++)
{
    listItems[i].onmouseover = function()
    {
        this.getElementsByTagName('a')[0].style.color = 'blue';
    }
    listItems[i].onmouseout = function()
    {
        this.getElementsByTagName('a')[0].style.color = '#cccccc';
    }
}