動的なjQueryセレクタ、変数の問題

Question

私はちょうどクリック時に表示される隠れた答えで質問のリストを作ろうとしています。私のコードはすべてのdivを隠しますが、アンカーをクリックすると、最後のボックスだけがトグルされます。この場合、すべてのアンカーは5番目のボックスをトグルします。

for(var i=1; i<6; i++){ 
    var x = i+""; 
    $("#box"+ x).hide(); 
    $("#feature"+x).click(function(){ 
     $("#box"+x).toggle(400); 
    }); 
} 

私の基本的なHTMLは次のように見えますが、5組に：私はループと文字列連結のために使用せずに機能を書いた場合

<p><a id="feature1" href="#">1. Absent Message</a></p> 
<div id="box1">Stuff here 1</div> 
<p><a id="feature2" href="#">2. Alarm Setting</a></p> 
<div id="box2">Stuff here 2</div> 

、機能は、私は彼らがしたい何。誰かが私を正しい方向に向けることができますか？文字列の操作に何か問題がありますか？

Answer 1

あなたの問題は、それが常に5だ末におけるのでxは、ループのすべてのコピーの間で共有され、そしてそれは、クリック時に追加していますとき$("#box"+x)は常に$("#box5")になるということです。もっと簡単な方法は、このようなクラスに、次のようになります。

<p><a class="feature" href="#">1. Absent Message</a></p> 
<div class="box">Stuff here 1</div> 

そして、それは比較的、このように見つける：それはないオプションなら

$(".box").hide(); 
$(".feature").click(function() { 
    $(this).parent().next(".box").toggle(400); 
}); 

、あなたのループに必要な範囲を提供する必要があります、このように：私たちはそのを取得する匿名関数へiを渡しているこれにより

for(var i=1; i<6; i++){ 
    (function(x) { 
    $("#box"+ x).hide(); 
    $("#feature"+x).click(function(){ 
     $("#box"+x).toggle(400); 
    }); 
    })(i); 
} 

コピーxと呼ばれる共有変数ではなく、あなたのループが存在する関数にスコープされています（これは現在起こっていることです）。