jquery 循环点击事件不适用于 eq(i)

Question

我正在尝试将点击事件添加到 6 个按钮，这些按钮将切换 6 个不同的内容（按顺序）。 所以基本上我点击按钮 1，内容 1 将向上/向下滑动等。我在下面创建了代码，但我不知道如何循环它以使其更简单和有效。

没有循环的工作代码：

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 循环，但它不起作用并且出现非错误。

我创建的不工作循环：

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

When you declare a variable in JavaScript, the variables are scoped to function they are created in or if they are in outside of function , they exist in the global scope.

当您创建function时，function 从parent scope 继承变量。

当您在for循环内创建function时，function 将从父 scope 继承i并且当您单击任何下拉按钮时， i将增加dropdownButtons.length按钮的长度。

为了解决i的这个问题，你应该在声明i之前添加let ，这将使i作用于for块而不是global scope。 任何继承i的 function 都将拥有i的副本，而不是原始的i 。 在这里阅读更多关于 let 的信息。

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