Hide Div mit dynamischem Optionsfeld mit jQuery?

Question

Tatsache: Ich bin nicht so gut mit jQuery.

Problem:

Ich habe ein Formular dynamisch gerendert Optionsschaltflächen enthält. Wenn ich auf ein Optionsfeld klicke, möchte ich ein Div anzeigen, um eine Erklärung zu geben. Innerhalb des "versteckten" div möchte ich eine Schaltfläche oder einen Link, um das div zu "schließen". Ich habe 27 Radioknöpfe, klicke auf jeden WORKS, ganz in Ordnung, es zeigt den richtigen Div und ich kann auf einen anderen Radio-Button klicken und es wechselt zum nächsten versteckten Div, außer dass ich sie nicht verstecken kann! Aber ich kann das div des ersten Radioknopfs verstecken, aber ich kann keines der anderen 26 verstecken, der Knopf tut nichts in diesen divs. Hier

ist der Code für meine Radio-Buttons:

$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 />"; 

-Code für meine versteckte divs (aus meiner db erstellt):

$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>"; 

Und hier ist meine jQuery-Code:

<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> 

Jede Hilfe wäre großartig.

Answer 1

Erste Sache: Es sieht aus wie Ihre

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

ist außerhalb Ihrer

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

Wie ich bin sicher, dass Sie wissen, läuft jQuery alles innerhalb dieser Funktion, nachdem die Seite bereit ist, zu sein zugegriffen. Im Moment denke ich, dass jQuery nach "#hidr" s sucht und keine findet, da dieser Code so schnell wie möglich ausgeführt wird. Wahrscheinlich bevor der Browser irgendwelche "#hidr" s gemacht hat

Aber warte! Es gibt mehr. Schau genau hin

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

Du verwendest eine ID! :) Es sollte nur eine Sache auf deiner Seite mit einer bestimmten ID geben. Versuchen Sie stattdessen, die Klasse zu verwenden. Auf diese Weise können Sie jedem $ (". Hidr") das .click-Ereignis anhängen.

Dann ist es nur eine Frage der Bezugnahme auf die Eltern, um alles verschwinden zu lassen. Gefällt mir:

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

Viel Glück mit Ihrer Anwalt Seite!

Answer 2

Anstelle von .hide (1000) können Sie .toggle verwenden?