1

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

如下所示，HTML 文件多次包含同一个 div 块。我的问题是，如果用户单击图像，如何让 Ajax 显示该show-reply特定块的 HTML（在 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？

请帮忙！

4

3 回答 3

1

第一：ID在文档中应该是唯一的，对于和其他重复的show-reply元素，使用class属性代替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);
            }
        });
    });
});
于 2013-09-05T00:05:21.330 回答
1

尝试这个

 $("div").click(function(e) {
            if($(e.target).is('.reply-quote')){
                e.preventDefault();
                return;
            }
            alert("work ");
        });
于 2013-09-05T04:17:53.030 回答
0

您应该在 html 中将 id="show-reply" 更改为 class="show-reply"，然后在 JS 中更改 $("#show-reply").append(data); 到 $(this).parent(".show-reply").append(data);

于 2013-09-05T00:08:02.533 回答