Чистый JavaScript - цикл работает с элементами [0], но не с элементами [i]

Question

Мой упрощенный код, который должен добавить EventListener к каждому элементу b в моей навигации, выглядит следующим образом:

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 не создается.

Если я изменяю увеличивающиеся allToggleBs [i] на статические allToggleBs [0], первыйЭлемент b получает класс "show" при нажатии - как и ожидалось.То же самое работает с allToggleBs [1] для второго элемента b.

Так что в основном элементы b найдены правильно, но цикл for не работает, и я не могу найти причину.

Answer 1

Я думаю, что вы теряете контекст i.Вы можете объявить переменную i с let вместо 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 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

Объявите переменную с let вместо var. Вы можете использовать

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

Answer 4

Объявите переменную с let вместо var, что создаст отдельную область.

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