jQuery中的简单循环迭代器

Question

一个非常简单的问题。如何在简单的for循环中生成以下脚本：

jQuery(document).ready(function(){
    jQuery("#toggle-0").click(function(){
        jQuery("#toggle-list-0").slideToggle(500);
    });
    jQuery("#toggle-1").click(function(){
        jQuery("#toggle-list-1").slideToggle(500);
    });
    jQuery("#toggle-2").click(function(){
        jQuery("#toggle-list-2").slideToggle(500);
    });
});

for循环与Python中的相同：

for i in range(3): a, b = "#toggle-" + str(i), "#toggle-list-" + str(i)

谢谢!

Answer 1

你的代码违反了枯燥原则。

1. 没有必要为每个事件处理程序设置一个单独的ready块。
2. 您应该考虑使用类和类选择器来代替ID选择器，并使用DOM遍历方法 of jQuery的强大功能来选择目标元素。
3. 在这里使用循环是一个糟糕的选项/没有必要。大多数jQuery方法的设计都是为了在幕后迭代集合。

下面是一个使用逗号分隔的选择器的示例：

jQuery(document).ready(function($){
    $("#toggle-0, #toggle-1, #toggle-2").click(function() {
        var num = this.id.replace('toggle-', '');
        $("#toggle-list-" + num).slideToggle(500);
    });
});

上面的片段是缩小原始代码的一种方法，但是假设您想要向选择器再添加10个ID。现在，您的代码是不可维护的，没有任何意义。使用类代替。

Answer 2

在文档就绪回调的内部使用for循环进行迭代。确保关闭i，使其不会在单击事件处理程序中更改。

jQuery(document).ready(function(){
    for(var i = 0 ; i < 3; i++){
        (function(i){
            jQuery("#toggle-"+i).click(function(){
                jQuery("#toggle-list-"+i).slideToggle(500);
            });
        })(i)
    }
});

Answer 3

$(document).ready(function(){
   for(i = 0; i < 3; i++)
   {  
      $('#toggle-'+i).click(function(){
        $('#toggle-list-'+i).slideToggle(500);
      });     
   };
});

但我强烈建议把身份证改成名字；

不需要切换0；toggle 1；toggle 2，只需将一个名称=toggle放在这里，而只需得到这样的切换数组：

var toggles = $('toggle');

并与之合作。