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)

ありがとう！

回答：

回答№1は2

あなたのコードはDRY原則に違反しています。

1. 1つを別にする必要はありません ready イベントハンドラごとにブロックします。
2. IDセレクタの代わりにクラスとクラスセレクタを使用し、 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);
});
});

上記のスニペットは、元のコードを縮小する方法の1つですが、セレクタにさらに10個のIDを追加するとします。さて、コードは保守可能ではなく、意味をなさないので、代わりにクラスを使用してください。

---

回答№2については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)
}
});

---

回答№3の場合は0

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

しかし、私は "id"を名前に変更することを強く勧めます。

toggle0; toggle1; toggle2の代わりに、1つのname = toggle あなたはこのようにあなたのトグルの配列を取得するよりも：

var toggles = $("toggle");

それを使って作業してください。

---