php - 单击时显示特定 div 的 HTML

Question

我设置了一些 HTML 和 Ajax，这样如果您单击某个图像(下面的 reply-quote 类)，它会启动一些 Ajax 以在页面的其他地方回显 HTML。

如下所示，HTML 文件多次包含相同的 div block 。我的问题是，如果用户单击图像，我如何让 Ajax 显示特定 block 的 HTML(在 show-reply div 中)而不是所有 block ？

<!-- BLOCK ONE -->
<div class="style1">
  <div class="style2">
    <img src="image.png" class="reply-quote" />
      <div class="style3">
        <div class="style4">
          <div id="show-reply"></div>
          <div class="reply-box">
            <form class="reply-container no-margin" method="POST" action="">
              <textarea class="reply-field" name="new_comment" placeholder="Write a reply..."></textarea>
              <button name="submit" class="btn" type="submit">Post</button>
            </form>
          </div>
        </div>
      </div>
   </div>
 </div>

<!-- BLOCK TWO -->
<div class="style1">
  <div class="style2">
    <img src="image.png" class="reply-quote" />
      <div class="style3">
        <div class="style4">
          <div id="show-reply"></div>
          <div class="reply-box">
            <form class="reply-container no-margin" method="POST" action="">
              <textarea class="reply-field" name="new_comment" placeholder="Write a reply..."></textarea>
              <button name="submit" class="btn" type="submit">Post</button>
            </form>
          </div>
        </div>
      </div>
   </div>
 </div>

这是我现在拥有的 JQuery:

$(document).ready(function() {    
  $(".reply-quote").click(function() {
    $.ajax({
      url: 'assets/misc/show_reply.php', // this file simply echoes back the HTML to the `show-reply` div
      type: "POST",
      data: {post_id: $(this).attr('id')},
      success: function(data) {
        $("#show-reply").append(data); // this is where the problem lies
      }
    });
  });
});

据我了解，我必须以某种方式实现 $(this)、parent()、find() 等，而不是我正在使用的当前行 ($("#show-reply").append(data);).问题是，该行应该是什么，以便在我单击图像时它只显示该特定 block 的 HTML？

请帮忙!

Answer 1

首先:ID在一个文档中应该是唯一的，show-reply和其他id重复的元素使用class属性代替

<div class="show-reply"></div>

然后你需要在点击的reply-quote图片旁边找到show-reply

$(document).ready(function() {   

    $(".reply-quote").click(function() {
        var $reply = $(this);
        $.ajax({
            url: 'assets/misc/show_reply.php', // this file simply echoes back the HTML to the `show-reply` div
            type: "POST",
            data: {post_id: $(this).attr('id')},
            success: function(data) {
                $reply.closest('.comment-container').find(".show-reply").append(data);
            }
        });
    });
});