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中的簡單循環迭代器

回答

相關問題