一个非常简单的问题。如何在简单的 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)
谢谢!
你的代码违反了 DRY 原则。
- 不需要为每个事件处理程序设置一个单独的
ready
块。 - 你应该考虑使用类和类选择器而不是ID选择器,并使用jQuery的DOM遍历方法的强大功能来选择目标元素。
- 在这里使用循环是一个糟糕的选择/没有必要。大多数 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。现在你的代码是不可维护的,没有任何意义。请改用类。
在文档就绪回调中使用 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)
}
});
$(document).ready(function(){
for(i = 0; i < 3; i++)
{
$('#toggle-'+i).click(function(){
$('#toggle-list-'+i).slideToggle(500);
});
};
});
但我强烈建议将 id 更改为名称;
而不是切换0;切换1;切换2只需输入一个名称=切换而不是你只是得到这样的切换数组:
var toggles = $('toggle');
并与之合作。