Question

我设置了一些HTML和Ajax，以便在单击某个图像（下面的reply-quote类）时，它会启动一些Ajax以在页面的其他位置回显HTML。

如下所示，HTML文件多次包含相同的div块。我的问题是，如果用户点击图片，我怎样才能让Ajax显示该特定块的HTML（在show-reply div内）而不是全部？

<!-- 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(), etc.而不是我正在使用的当前行（$("#show-reply").append(data);）。问题是，该行应该是什么，如果我单击图像，它只显示该特定块的HTML？

请帮忙！

Answer 1

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

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

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

$(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);
            }
        });
    });
});

Answer 2

试试这个

 $("div").click(function(e) {
            if($(e.target).is('.reply-quote')){
                e.preventDefault();
                return;
            }
            alert("work ");
        });

Answer 3

您应该在html中将id =“show-reply”更改为class =“show-reply”，然后在JS中更改$（“＃show-reply”）。append（data）; to $（this）.parent（“。show-reply”）。append（data）;

单击时显示特定div的HTML

3 个答案: