javascript - 如何在多个显示的评论上显示/隐藏回复评论框

Question

所以这是我用它来显示/隐藏评论框的代码，它实际上可以工作，但是当我尝试单击第一个评论的回复时，当我发表多个评论时，我遇到的问题是评论框显示/隐藏但是当我尝试单击其他评论时，它不再起作用，它只适用于第一个评论....有什么方法可以解决这个问题吗？...

HTML 代码

<div id="replybutton" class="btn4 like" style="margin-top:-25px;margin-left:-10px;">
    <span class="btn reply" id="replyb">Reply</span> •&emsp;
</div>

<div class="col-lg-12" id="reply" style="background:#eff9c7;margin-left:50px;margin-top:-20px;display:none;" >
    <img  src="img/icons/no-icon-available.png" class="pull-left" style="   border-radius:50%;margin-bottom:3px;width:30px;height:30px;" />
    <p style="margin-top:18px;line-height:15px;"><strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br>

<div class="btn4 disabled" style="margin-top:-25px;margin-left:-10px;">
    <span style="margin-left:5px;font-size:12px;color:gray;"><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" style="width:88%;height:25px;margin-top:-10px;" placeholder="Write a reply..." />
</div>

JAVASCRIPT

<script type="text/javascript">
$(document).ready(function(){
$('#replybutton').click(function(){
$('#reply').toggle();
});
});
</script> 

Answer 1

id 在 HTML 页面中必须是唯一的，您应该将 id 更改为类 replybutton 和 reply 并且 jquery 代码将是，

$(document).ready(function(){
    $('.replybutton').click(function(){
       $(this).next('.reply').toggle();
    });
});

片段，

$(document).ready(function() {
  $('.replybutton').click(function() {
    $(this).next('.reply').toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="container">
  <div class="replybutton btn4 like" style="">
    <span class="btn reply" id="replyb">Reply</span> •&emsp;
  </div>

  <div class="col-lg-12 reply" style="display:none">
    <img src="img/icons/no-icon-available.png" class="pull-left" style="" />
    <p>
      <strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>

      <div class="btn4" style="">
        <span style=""><abbr class="timeago" title="">time</abbr></span>
      </div>
    </p>
    <input type="text" class="form-control pull-right" placeholder="Write a reply..." />
  </div>
</div>
<div class="container">
  <div class="replybutton btn4 like" style="">
    <span class="btn reply" id="replyb">Reply</span> •&emsp;
  </div>

  <div class="col-lg-12 reply" style="display:none">
    <img src="img/icons/no-icon-available.png" class="pull-left" style="" />
    <p>
      <strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>

      <div class="btn4" style="">
        <span style=""><abbr class="timeago" title="">time</abbr></span>
      </div>
    </p>
    <input type="text" class="form-control pull-right" placeholder="Write a reply..." />
  </div>
</div>
<div class="container">
  <div class="replybutton btn4 like" style="">
    <span class="btn reply" id="replyb">Reply</span> •&emsp;
  </div>

  <div class="col-lg-12 reply" style="display:none">
    <img src="img/icons/no-icon-available.png" class="pull-left" style="" />
    <p>
      <strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>

      <div class="btn4" style="">
        <span style=""><abbr class="timeago" title="">time</abbr></span>
      </div>
    </p>
    <input type="text" class="form-control pull-right" placeholder="Write a reply..." />
  </div>
</div>