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

我的简化代码应向导航中的每个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循环不起作用，并且我找不到原因。

最佳答案

如果需要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]);
    }
}