使用jQuery隐藏带有动态单选按钮的Div？答案

【问题标题】：Hide Div with dynamic radio button using jQuery?使用jQuery隐藏带有动态单选按钮的Div？
【发布时间】：2012-04-02 23:19:54
【问题描述】：

事实：我不太擅长 jQuery。

问题：

我有一个包含动态呈现的单选按钮的表单。单击单选按钮时，我希望出现一个 div 以提供文本解释。在“隐藏”的 div 中，我想要一个按钮或链接来“关闭”该 div。我有一组 27 个单选按钮，单击每个 WORKS 都很好，它显示了正确的 div，我可以单击另一个单选按钮，它切换到下一个隐藏的 div，但之后我无法隐藏它们！但是，我可以隐藏第一个单选按钮的 div，但我不能隐藏其他 26 个中的任何一个，该按钮在这些 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 />";

隐藏 div 的代码（从我的数据库创建）：

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

任何帮助都会很棒。

【问题讨论】：

标签： jquery dynamic radio-button hidden

【解决方案1】：

第一件事：它看起来像你的

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

在你之外

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

我相信你知道，jQuery 会在页面准备好访问之后运行该函数内的所有内容。现在我认为 jQuery 正在寻找“#hidr”，但没有找到任何东西，因为这段代码会尽快运行。可能在浏览器生成任何“#hidr”之前

但是等等！还有更多。仔细看

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

您正在使用 ID！ :) 任何给定的 id 在您的页面上都应该只有一件事。尝试改用类。这样您就可以将 .click 事件附加到每个 $(".hidr")

然后，只需引用父级即可使其全部消失。像这样：

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

祝你的律师页面好运！

【讨论】：

感谢您让我知道该错误。我修复了它，但它仍然无法正常工作。只有第一个单选按钮的 div 会“隐藏”
完全正确！原谅我。我需要将我的 stackoverflow 帐户设置为通过电子邮件提醒 :) 让我编辑我的答案。

【解决方案2】：

你可以用 .toggle 代替 .hide(1000) 吗？

【讨论】：