1

HTML と Ajax をセットアップして、特定の画像 (reply-quote以下のクラス) をクリックすると、Ajax が開始され、ページの別の場所に HTML がエコーされます。

以下に示すように、HTML ファイルには同じ div ブロックが複数回含まれています。私の問題は、ユーザーが画像をクリックした場合、Ajaxshow-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

これを試して

 $("div").click(function(e) {
            if($(e.target).is('.reply-quote')){
                e.preventDefault();
                return;
            }
            alert("work ");
        });
于 2013-09-05T04:17:53.030 に答える
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);
            }
        });
    });
});
于 2013-09-05T00:05:21.330 に答える
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 に答える