Question

我的简化代码应向导航中的每个b元素添加一个EventListener，如下所示：

function openSubNavs2()
{
	var allToggleBs = document.querySelector('ul#nav').getElementsByTagName('b');
	for (var i=0; i<allToggleBs.length; i++)
	{
		var toggleB = allToggleBs[i];
		toggleB.addEventListener('click', function()
		{
			toggleB.className = 'show';
		});
	}
}
window.addEventListener('load', function() {openSubNavs2();});

但未创建EventListener'click'。

如果我将增加的allToggleBs [i]更改为静态allToggleBs [0]，则单击时，第一个b元素将获得类“ show”-符合预期。第二个b元素的allToggleBs [1]也是如此。

因此基本上可以正确找到b元素，但是for循环无法正常工作，我找不到原因。

Answer 1

使用let而不是var声明变量，这将创建单个作用域。

for (let i=0; i<allToggleBs.length; i++)

Answer 2

如果需要es3支持，也可以使用匿名功能：

function openSubNavs2()
{
    var allToggleBs = document.querySelector('ul#nav').getElementsByTagName('b');
    for (var i=0; i<allToggleBs.length; i++)
    {
        (function(toggleB) {
            toggleB.addEventListener('click', function() {
                toggleB.className = 'show';
            });
        })(allToggleBs[i]);
    }
}

Answer 3

我认为您正在丢失i的上下文。您可以使用let而不是var声明i var。或仍使用ES5，将i括在闭包中（因此i不会改变其值）：

function openSubNavs2()
{
    var allToggleBs = document.querySelector('ul#nav').getElementsByTagName('b');
    for (var i=0; i<allToggleBs.length; i++)
    {
        (function(i) {
            var toggleB = allToggleBs[i];
            toggleB.addEventListener('click', function()
            {
                toggleB.className = 'show';
            });
        })(i);

    }
}
window.addEventListener('load', function() {openSubNavs2();});

Answer 4

使用let而不是var声明变量。可以使用

for (let i=0; i<allToggleBs.length; i++)

纯JavaScript-for循环适用于elements [0]，但不适用于elements [i]

4 个答案: