javascript - 我想使用 jquery 单击链接后打开回复文本框

Question

我正在开发讨论板，我想使用 jquery 对每个评论建立一个回复系统，这样我就可以单击评论链接，然后将打开文本框以写入对此评论的回复，而无需加载整个页面。 这是我的 Html 和 PHP 代码。

 <?php
$query = $conn->query("SELECT * FROM comments WHERE article_id = '$ArticleID' ");
$rowCount = $query->num_rows;
if($rowCount > 0)
{
  while($row = $query->fetch_assoc())
  { 
  $CommentID = $row['comment_id'];
  $Comment = $row['text'];
  ?>
  <li class="comment">
  <div class="comment-container">
  <div class="comment-meta">
  <a class="comment-reply-link link-style3 creply" href="">Reply &raquo;</a>
  </div>
  <div class="comment-body">
  <p><?php echo $Comment; ?>.</p>
  </div>
  </div>
  </li>

  <li style="list-style: none; display: inline">
  <div class="comment_form">
  <form action="#" method="post">
  <textarea class="span10" name="Comment" rows="6"></textarea><br>
  <input class="btn btn-primary" type="submit" value="Reply">
  </form>
  </div> 
 <?php
  }
}
?>
</li>

这是我的 jquery 代码，我有问题。

<script type="text/javascript">
  $(document).ready(function()
  {
  $(".creply").click (function(e)
  {
  e.preventDefault();
  $(this).next(".comment_form").show(); // problem here...
  //$(".comment_form").show();
  });
  });
</script>

当我在脚本中使用注释行时，它可以工作，但没有逻辑。 单击链接后，它会显示所有评论的所有回复表单，而不是我单击的单独评论的回复表单。上面的代码我使用 $(this) 来获取我点击的评论，但它没有执行任何操作!？ 任何帮助，请! 我正在使用这个版本的 jquery

<script src="jquery-3.1.1.min.js">

Answer 1

您只需首先选择类 .comment 最接近的父元素，然后到达子元素。

$(document).ready(function() {
  $(".creply").click(function(e) {
    e.preventDefault();
    $(this).closest('.comment').next().show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="comment">
  <div class="comment-container">
    <div class="comment-meta">
      <a class="comment-reply-link link-style3 creply" href="">Reply &raquo;</a>
    </div>
    <div class="comment-body">
      <p>
        MyComment</p>
    </div>
  </div>
</li>

<li style="list-style: none; display: none">
  <div class="comment_form">
    <form action="#" method="post">
      <textarea class="span10" name="Comment" rows="6"></textarea>
      <br>
      <input class="btn btn-primary" type="submit" value="Reply">
    </form>
  </div>
</li>

您可以查看修改后的演示，它也可以处理多个注释: JsFiddle Demo