Question

可能重复：
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';
    }
}

Answer 2

我不确定，但我会想到＆amp;检查

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

... 我不确定你是不是在做这件事 2）做一个console.log（listItems）来查看它是什么，并记住数组 - 对象的差异。这一切都是现在，不得不去...对不起简短的回答，希望它有所帮助。

Answer 3

您的代码存在问题。在mouseover或mouseout上，i的值等于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]);

        }
    }

Javascript未定义变量错误

3 个答案: