使用jqueryhide&；在同一页上显示多个元素

嗨，我正在尝试创建一个页面，该页面多次使用隐藏和显示功能来隐藏不同的文本片段。我遵循了w3schools的教程，编辑了代码，试图让它正常工作。然而，我发现了一个错误，即隐藏和显示功能只对第一段文本有效，而对其他文本无效。 这是我的密码

<script type="text/javascript" src="/javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
 $("#show").click(function(){
    $("p").show();
  });
});
</script>
<div class="questions" id="question-1">
    <h1>Question</h1>
</div>
<p>
    answer</p>
<div id="hide">
    Hide</div>
<div id="show">
    Show</div>
<div class="questions" id="question-2">

        <h1>Question</h1>
</div>
<p>
    Answer</p>
<div id="hide">
    Hide</div>
<div id="show">
    Show</div>

$（文档）.ready（函数（）{
$（“#隐藏”）。单击（函数（）{
$（“p”）.hide（）；
});
$（“#显示”）。单击（函数（）{
$（“p”）.show（）；
});
});
问题:

答复

隐藏
显示
问题:

答复

隐藏
显示

---

有人知道为什么会发生这种情况吗？

因为您使用的是id而不是类。允许id在html页面中存在一次

好的，对于您的评论，您可以将它们与如下属性关联：

<p rel='answer_1'>Answer</p>
<div class="hide" answer='1'>Hide</div>
<div class="show" answer='1'>Show</div>

---

切勿对多个元素使用相同的

ID

。我已经对您的代码进行了一两次增量更改，以创建一些应该可以工作的代码。我为show/hide链接引入了一个

data

属性，其值由相关答案共享。现在，您可以在单击show或hide时获取

数据id

属性的值，然后根据该值生成jQuery选择器。你可以做更多的事情来让它干燥，但这是朝着正确方向迈出的第一步

<script type="text/javascript" src="/javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".hide").click(function(){
    var id = $(this).attr('data-id');
    $("p." + id).hide();
  });
 $(".show").click(function(){
    var id = $(this).attr('data-id');
    $("p." + id).show();
  });
});
</script>

<div class="questions" id="question-1">
 <h1>Question</h1>
</div>

<p data-id='answer-a'>answer</p>
<div class="hide" data-id='answer-a'>Hide</div>
<div class="show" data-id='answer-a'>Show</div>

$（文档）.ready（函数（）{
$（“.hide”）。单击（函数（）{
var id=$（this.attr（'data-id'）；
$（“p.”+id）.hide（）；
});
$（“.show”）。单击（函数（）{
var id=$（this.attr（'data-id'）；
$（“p.”+id.show（）；
});
});
问题:
答案
隐藏
显示

您好，谢谢您的回复，真的很有帮助。我还有一个问题。隐藏和显示功能适用于每个问题，但当您单击“隐藏”或“显示”时，它会隐藏每个答案。我希望能够单独隐藏答案。嗨，再次感谢你的回复。我在我的网站上测试了这段代码，当你点击银行上的任何东西寻求帮助时，它似乎都不起作用。现在一切都好了。如果有帮助，别忘了接受答案。

<script type="text/javascript" src="/javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".hide").click(function(){
    var id = $(this).attr('data-id');
    $("p." + id).hide();
  });
 $(".show").click(function(){
    var id = $(this).attr('data-id');
    $("p." + id).show();
  });
});
</script>

<div class="questions" id="question-1">
 <h1>Question</h1>
</div>

<p data-id='answer-a'>answer</p>
<div class="hide" data-id='answer-a'>Hide</div>
<div class="show" data-id='answer-a'>Show</div>