jquery - 单击评论按钮时如何显示每个容器的评论框？

Question

我有一个包含在 PHP while 循环中的包装器。每次循环运行时，一个新的包装器和来自数据库的另一组信息被添加到我们的文档中。每个包装器都有一个评论部分，用户可以在其中发表评论。但是我隐藏了评论框，直到用户点击评论按钮(.btn-comment)。但是当我只点击一个按钮时，这会显示所有的评论框。我怎么解决这个问题？

$(document).ready(function(e) {
$('.comment-box').hide();
});
$('.btn-comment').on('click', function(e) {
$('.comment-box').show('slow');
});

* {
padding: 0;
margin: 0;
font-family: Arial;
}
.wrapper {
width: 100%;
}
.comment-box {
display: block !important;
width: 80%;
margin: 10px auto;
}
.btn-comment {
padding: 5px;
cursor: pointer;
}
textarea {
padding: 5px;
width: 75%;
border-radius: 5px;
vertical-align: middle;
}
.s_comment {
padding: 5px;
width: 20%;
border-radius: 5px;
vertical-align: middle;
background-color: lightblue;
border: 1px solid #303030;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This is contained in a php while loop. Each time the loop runs, a new wrapper is created returning another set of data from the database -->
<div class='wrapper'>
  <div><!-- Publishes are fetched from the database and echo here --></div>
  <div class='btn btn-comment'>Comment</div>
  <div class='comment-box'>
  <textarea rows='1' placeholder='Write your comment'></textarea>
  <button class='s_comment'>Comment</button>
  </div>
</div>

Answer 1

从被点击的按钮开始，找到它的父包装器，即按钮和框的父级，然后找到您要显示的框。

$(this).closest('.wrapper').find('.comment-box').show('slow');