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');

单击注释按钮时，如何显示每个容器的注释框？

1 个答案: