jquery l oop событие click не работает с eq (i)

Question

Я пытаюсь добавить событие щелчка к 6 кнопкам, которые будут переключать слайд с 6 различным содержимым (по порядку). В основном я нажимаю кнопку 1, и содержимое 1 будет скользить вверх / вниз и c. Я создал код ниже, который работает, но я не знаю, как l oop это сделать проще и работает.

РАБОЧИЙ КОД БЕЗ L OOP:

var dropdownButtons = $('div[class*="_dropdown_but"]');
var dropdownContents = $('div[class*="_dropdown_content"]');


dropdownButtons.eq(0).click(function() {
    dropdownContents.eq(0).slideToggle();
});

dropdownButtons.eq(1).click(function() {
    dropdownContents.eq(1).slideToggle();
});

dropdownButtons.eq(2).click(function() {
    dropdownContents.eq(2).slideToggle();
});

dropdownButtons.eq(3).click(function() {
    dropdownContents.eq(3).slideToggle();
});

dropdownButtons.eq(4).click(function() {
    dropdownContents.eq(4).slideToggle();
});

dropdownButtons.eq(5).click(function() {
    dropdownContents.eq(5).slideToggle();
});

Я пытался использовать FOR l oop, но он не работает, и ошибка не обнаруживается.

НЕ РАБОТАЕТ L OOP Я СОЗДАЛ:

for (i = 0; i < dropdownButtons.length; i++) {
        dropdownButtons.eq(i).click(function() {
        dropdownContents.eq(i).slideToggle();
    });
}

Я пытался написать «eq (i)» по-другому, например, «eq (+ i +)» или «eq (+ 'i' +)» или «eq ('+ i +' ) ", но ничего не изменилось.

Answer 1

Когда вы объявляете переменную в JavaScript, переменные имеют область действия function, в которой они созданы, или, если они находятся за пределами function, они существуют в глобальной области.

Когда вы создаете function, функция наследует переменные из области parent.

Когда вы создаете function внутри for l oop, функция наследует i из родительской области и к тому времени, когда вы нажмете любую из раскрывающихся кнопок, i будет увеличено до dropdownButtons.length.

Чтобы решить эту проблему с i, вы должны добавить let перед объявлением i, что сделало бы i областью действия for вместо области global. Любая функция, наследующая i, будет иметь копию i вместо оригинала i. Подробнее об аренде здесь.

for (let i = 0; i < dropdownButtons.length; i++) {
    dropdownButtons.eq(i).click(function() {
        dropdownContents.eq(i).slideToggle();
    });
}