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));

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

编辑 - 作为一个黑客，你可以利用相关元素的类名都是“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');
});

Answer 2

即使您想在循环中运行选择器，我也不会这样做，因为您正在进行多个DOM选择。您可以通过一个DOM选择来完成它：

$(document).ready(function () {
    $('div[class^=flip]').each(function ( idx ) {
        $(this).click(function() {
            $('.panel' + (idx + 1)).slideToggle("slow");
        });
    });
});

这将假设flip元素按照数字顺序出现在页面上。

这会使用the attribute starts with selector来获取类名称以<div>开头的所有"flip"个元素。如果标签名称不同，请更改标签名称，如果标签名称不同，则将其删除。

它使用index为您提供的.each()来切换正确的.panel。

Answer 3

$(document).ready(function () {

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

});

Answer 4

试试这个：

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

PS： - 不要使用它，它不会像@patrick

指出的那样起作用

document.ready函数中的多个函数

4 个答案: