Question

您好我正在尝试创建一个多次使用隐藏和显示功能来隐藏不同文本片段的页面。我按照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>

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

Answer 1

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

好的，对于你的评论，你可以将它们与这样的属性联系起来：

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

然后在你的脚本中：

$(".hide").click(function(){
    $("p[rel='answer_" + $(this).attr("answer") + "']").hide();
});

$(".show").click(function(){
    $("p[rel='answer_" + $(this).attr("answer") + "']").show();
});

Answer 2

不要对多个元素使用相同的ID。我已经将代码更改了一两个增量来创建应该起作用的东西。我在show / hide链接中引入了data属性，其值由相关答案共享。现在，您可以在单击show或hide时获取data-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>

在同一页面上使用Jquery Hide＆amp; Show显示多个元素

2 个答案: