我想在使用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

Answer 2

您需要查询parents()并找到下一个.comment_form元素。

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