jQueryを使用してダイナミックラジオボタンでdivを非表示にしますか？

Question

事実：jQueryではそれほど良くありません。

問題：

私は動的にレンダリングされたラジオボタンを含むフォームを持っています。ラジオボタンをクリックすると、divがテキストの説明を表示するようにします。 「隠された」divの中には、divを閉じる「閉じる」ボタンやリンクが必要です。私は27個のラジオボタンを持っています。それぞれの作品をクリックすると、適切なdivが表示され、別のラジオボタンをクリックして、次の隠れたdivに切り替えます。しかし、私は最初のラジオボタンのdivを隠すことができますが、他の26のどれも隠すことはできません。ボタンはdivで何もしません。私の隠されたdivのため

$categoryQuery = "SELECT * FROM blah, blah"; 
$categoryResult = mysqli_query($link, $categoryQuery); 

        while($row = mysqli_fetch_array($categoryResult)){ 

     $cat_id = $row['att_cat_id']; 
     $category = $row['att_cat_name']; 

echo "<input type='radio' name='AttorneyCategory[]' value='$cat_id'> $category<br />"; 

コード（私のDBから作成）：ここで

は私のラジオボタンのコードです

$categoryhelpQuery = "SELECT * FROM blah blah"; 
$categoryhelpResult = mysqli_query($link, $categoryhelpQuery); 

        while($row = mysqli_fetch_array($categoryhelpResult)){ 

     $cat_id = $row['att_cat_id']; 
     $category = $row['att_cat_name']; 
     $category_description = $row['att_cat_description']; 

echo "<div id='blk-$cat_id' class='toHide'>"; 
echo "<strong><em><center>Attorney Search Help Center</center></em></strong><button   id='hidr'>Hide</button><br />"; 
echo "<strong>$category:</strong>&nbsp;&nbsp;$category_description"; 
echo "</div>"; 

そして、ここに私のjQueryのコードです：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

    <script type="text/javascript"> 
$(function() { 
    $("[name='AttorneyCategory[]']").click(function(){ 
     $('.toHide').hide(); 
     $("#blk-"+$(this).val()).show(); 
    }); 


}); 

    $("#hidr").click(function() { 
    $('.toHide').hide(1000); 
}); 


</script> 

助けがあれば助かります。

Answer 1

まず最初に：私はあなたが知っていると確信しているとして、それはあなたの

$("#hidr").click(function() { 
$('.toHide').hide(1000); 
}); 

のように見えますが、あなたの

$(function(){ 
    // this part 
}); 

の外にあるページをする準備ができた後は、jQueryのは、その関数内ですべてを実行しますアクセスされました。今はjQueryが "#hidr"を探していて、このコードができるだけ早く実行されるため、何も見つけられないと思います。ブラウザが「#hidr」を作成する前に、可能性があります

お待ちください！もっとたくさんあります。詳細をご覧ください

<button id='hidr'>Hide</button> 

あなたはIDを使用しています！ :)あなたのページには、特定のIDを持つものが1つだけあるはずです。代わりにクラスを使用してみてください。そうすれば、すべての$（ "。hidr"）に.clickイベントを添付することができます。

次に、親を参照してすべて消えるようにすることだけです。このように：

$(".hidr").click(function() { 
    $(this).parent().hide(1000); 
}); 

あなたの弁護士のページで幸運！

Answer 2

.hide（1000）を使用する代わりに.toggleを使用できますか？