Question

所以这个jQuery是对我正在处理的社交网站的状态提交评论。

基本上我的问题很简单明了。我不能让jQuery追加到最近的div。它不附加到最接近的.status-comment，即评论所包含的div ..

正如你所看到的，我有一个警告，显示“hi”，当我发表评论时，它会起作用。所以我知道它在剧本中得到了很多，它只是不会附加。我不知道为什么。任何帮助将不胜感激我的朋友们。

    $(".add-comment").bind("submit", function() { 
 var comment = $(this).closest(".commentInput").attr('value'); 
 if(comment != ""){ 
  $.ajax({ 
   type : "POST", 
   dataType : "json", 
   cache : false, 
   url : "/ajax/add-comment.php", 
   data : $(this).serializeArray(), 
   success : function(result) { 
    if(result.result == "success"){ 
    alert("hi");
      $(this).closest('.status-comment').append("<p><a href='/profile?id=<?php echo $acct['id']; ?>'><img class='statusThumbnail img-thumbnail' src='/userphotos/<?php echo $acct['photo']; ?>'></a> <span><strong><?php echo $acct['first']; ?> <?php echo $acct['last'];?></strong></span></p><p><span>"+comment+"</span></p><hr>");
      $("#comment").val("");         
    }else{ 
     alert("Well it looks like you failed");
    } 
   }, 
   error : function() { 
    alert("An error occurred, please try again later."); 
   } 
  }); 
 }else{ 
  alert("You should probably write a comment before posting it");
 } 
 return false;
});

以下是HTML标记，在PHP中回显

评论输入以提交评论：

<!-- comment box -->
        <form class="add-comment" method="post">
        <img class="comment-thumbnail" src="/userphotos/'.$acct['photo'].'"/> <span><input type="text" name="comment" class="form-control commentInput" placeholder="Comment" autocomplete=off>
        <input type="hidden" name="pid" value="'.$aStatus['status']['id'].'">
        </form></span></div>
        <!-- end comment box -->

以下是回复所有评论的主题

echo '<div class="status-container">';
    foreach($status as $aStatus){
        echo '<div id="post_id_'.$aStatus['status']['id'].'" class="panel panel-default status post-box">';
        echo '<div class="panel-heading">
        <img class="statusThumbnail img-thumbnail" src="/userphotos/'.$aStatus['user']['photo'].'"/> <h6><a href="/profile?id='.$aStatus['user']['id'].'">'.$aStatus['user']['first'].' '.$aStatus['user']['last'].'</a></h6></div>';
        echo '<div class="panel-body">';
        echo '<p>'.$aStatus['status']['status'].'</p>';
        echo '<p><a><i class="glyphicon glyphicon-thumbs-up"></i> Like</a> · <a style="cursor:pointer;" class="status-comment-link"><i class="glyphicon glyphicon-comment"></i> Comment</a> - <abbr style="font-weight:bold; border-bottom:none;" title="'.date("l, F jS, Y g:i:s A",$aStatus['status']['post_time']."").'">about '.ago($aStatus['status']['post_time']."").'</abbr></p>';
        echo '</div>';
        echo '<div class="panel-footer">';
        echo '<div class="status-comment">';

status-comment与add-comment之间的关系

echo '<div class="status-comment">';

    $comment = $account->get_comments($aStatus['status']['id']);
    if(!isset($comment['error'])){
        foreach($comment as $aComment){
            echo'

        <p><a href="/profile?id='.$aComment['user']['id'].'"><img class="statusThumbnail img-thumbnail" src="/userphotos/'.$aComment['user']['photo'].'"/></a> <span><strong>'.$aComment['user']['first'].' '.$aComment['user']['last'].'</strong></span></p>
        <p><span>'.$aComment['comment']['comment'].'</span></p>
        <hr>';
        }
    }

echo    '
        </div>
        <!-- comment box -->
        <form class="add-comment" method="post">
        <img class="comment-thumbnail" src="/userphotos/'.$acct['photo'].'"/> <span><input type="text" name="comment" class="form-control commentInput" placeholder="Comment" autocomplete=off>
        <input type="hidden" name="pid" value="'.$aStatus['status']['id'].'">
        </form></span></div>
        <!-- end comment box -->';

        echo '</div>';

Answer 1

问题是ajax成功处理程序内的关键字this没有引用add-comment元素，你可以使用一个闭包变量，如下所示

$(".add-comment").bind("submit", function () {
    var $this = $(this);
    //use val() to get the value, also you may have to use `$this.find(".commentInput").val()`
    var comment = $.trim($this.closest(".commentInput").val());
    if (comment != "") {
        $.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            url: "/ajax/add-comment.php",
            data: $(this).serializeArray(),
            success: function (result) {
                if (result.result == "success") {
                    alert("hi");
                    //this here does not refer the `add-comment` element, use a closure variable
                    $this.closest('.status-comment').append("<p><a href='/profile?id=<?php echo $acct['id']; ?>'><img class='statusThumbnail img-thumbnail' src='/userphotos/<?php echo $acct['photo']; ?>'></a> <span><strong><?php echo $acct['first']; ?> <?php echo $acct['last'];?></strong></span></p><p><span>" + comment + "</span></p><hr>");
                    $("#comment").val("");
                } else {
                    alert("Well it looks like you failed");
                }
            },
            error: function () {
                alert("An error occurred, please try again later.");
            }
        });
    } else {
        alert("You should probably write a comment before posting it");
    }
    return false;
});

问题是status-comment元素不是add-comment元素的祖先元素。所以答案是

$this.closest('.panel').find('.status-comment').append("<p><a href='/profile?id=<?php echo $acct['id']; ?>'><img class='statusThumbnail img-thumbnail' src='/userphotos/<?php echo $acct['photo']; ?>'></a> <span><strong><?php echo $acct['first']; ?> <?php echo $acct['last'];?></strong></span></p><p><span>" + comment + "</span></p><hr>");

jQuery没有附加评论

1 个答案: