Простий цикл ітератора в 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);
});
});

The за цикл призначений як у Python:

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

Дякую!

Відповіді:

2 для відповіді № 1

Ваш код порушує принцип DRY.

1. Немає необхідності мати один окремий ready блоку для кожного обробника подій.
2. Необхідно розглянути можливість використання класів і селектора класів замість селекторів ідентифікаторів і використовувати потужність Методи переходу DOM 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 ідентифікаторів до селектора. Тепер ви не підтримуєте код і не має ніякого сенсу.

---

2 для відповіді № 2

Iterate з циклом 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)
}
});

---

0 для відповіді № 3

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

Але я настійно рекомендую змінити ідентифікатор на імена;

Замість того, щоб увімкнути toggle0; toggle1; toggle2 просто покласти одне ім'я = перемикати Тоді ви просто отримаєте масив перемикань, подібних до цього:

var toggles = $("toggle");

І працювати з ним.

---