jQuery中的简单循环迭代器

一个非常简单的问题。我怎样才能使一个简单的以下脚本循环：jQuery中的简单循环迭代器

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

的为循环的目的是为在Python：

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

谢谢！

来源

2015-06-19 isar

你真的只需要一个文档就绪功能。为什么不给每个这样的id一个类然后查询这个类并且做$（this）.slideToggle（500）？ – depperm

您的代码违反了DRY原则。

对于每个事件处理函数，没有必要有一个单独的ready块。
您应该考虑使用类和类选择器而不是ID选择器，并使用jQuery的DOM traversing methods的功能来选择目标元素。
在这里使用循环是一个糟糕的选项/不是必需的。大多数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添加到选择。现在你的代码不可维护，也没有任何意义。改用类。

来源

2015-06-19 20:42:48 undefined

在文档就绪回调中迭代for循环。确保关闭i以便它不会在click事件处理程序中更改。

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

来源

2015-06-19 20:05:47

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

但我强烈建议更改ID对名称;

而不必toggle0的; toggle1; toggle2只是把一个名称=切换比你只是让你切换的阵列是这样的：

var toggles = $('toggle');

并使用它。

来源

2015-06-19 20:07:50 Fabjan

jQuery中的简单循环迭代器

回答

相关问题