0

可能重复：
Javascript 循环中的事件处理程序 - 需要闭包吗？

我想简单地将 onclick 事件分配给li无序列表中的一系列元素。li我不想通过定义大量唯一 ID 并手动将事件添加到每个元素来以凌乱的方式进行操作，而是希望通过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变量可能不在闭包的范围内？

4

3 回答 3

4

该变量在事件中不可用，您可以使用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';
    }
}
于 2012-09-25T19:08:08.173 回答
0

我不确定，但我会考虑并检查

var listItems = parentList.getElementsByTagName('li');
listItems[i]

...我不确定您是否正在这样做 2) 执行 console.log (listItems) 以查看它是什么，并记住数组-对象的区别。暂时就这些了，得走了……抱歉简短的回答，希望对您有所帮助。

于 2012-09-25T19:08:33.740 回答
0

你的代码有问题。i 的 mouseover 或 mouseout 值将等于 numItems；因为这些事件将在 for 循环完成后被调用。所以你应该保存上下文。

function bindEvent(elem){

            elem.onmouseover = function()
            {
               elem.getElementsByTagName('a')[0].style.color = 'blue';
            }
            elem.onmouseout = function()
            {
               elem.getElementsByTagName('a')[0].style.color = '#cccccc';
            }
}

    window.onload = function()
    {
        var parentList = document.getElementById('homeNav');
        var listItems = parentList.getElementsByTagName('li');
        var numItems = listItems.length;
        for(var i = 0; i < numItems; i++)
        {
          bindEvent(listItems[i]);

        }
    }
于 2012-09-25T19:08:42.547 回答