javascript - document.ready 函数中的多个函数

Question

这是我的代码:

$(document).ready(function () {

    $('.flip1').click(function () {
        $('.panel1').slideToggle("slow");
    });
    $('.flip2').click(function () {
        $('.panel2').slideToggle("slow");
    });
    $('.flip3').click(function () {
        $('.panel3').slideToggle("slow");
    });
    $('.flip4').click(function () {
        $('.panel4').slideToggle("slow");
    });
});

我想用 .flip 作为变量 (flipVar) 和 .panel 作为 (panelVar) 创建一个循环

Answer 1

好吧，如果这是我的页面，我会确保这些元素都共享一个类，这样我就不会需要循环。但是，您可以这样做:

 for (var i = 1; i <= 4; ++i) $('.flip' + i).click((function(i) {
   return function() { $('.panel' + i).slideToggle('slow'); };
 })(i));

循环变量必须被困在闭包中，以便每个“点击”处理程序引用正确的值。再一次，我真的不会这样做。我会让“翻转”元素共享一个类，然后将该索引(对相应“面板”的隐式引用)保存在单独的类元素或“data-”属性中。然后处理程序可以找到使用该值的面板。

edit — 作为 hack，您可以利用相关元素的类名都是“somethingNN”形式的事实，其中“NN”是数字部分。您可以去掉数字，然后将其附加到“面板”:

for (var i = 1; i <= 4; ++i) $('.flip' + i).click(function() {
  var panelClass = this.className.replace(/.*\bflip(\d+).*/, "panel$1");
  $(panelClass).slideToggle('slow');
});