如何在JQUERY中添加特定DIV中的數據JQUERY

Question

im我的JQUERY有一些問題。

基本上，我有這種Facebook風格的顯示帖子。每個帖子有<input>框，其中成員可以發表評論。當用戶點擊我的jQuery（AJAX）<enter>時，將獲取提交的評論並將其保存在我的數據庫中。

評論應立即出現在發表評論的特定<DIV>。

我的問題是，每當我在一個特定的POST我做了更新，以ALL我的帖子的評論提交評論。它只會在我刷新時消失。

這是我<div>顯示的TITLE和評論

<div id="content"> 
    <?php 
    /* GET TITLE*/ 
    $result = displayPosts(); 
     while ($row = $result->fetch_assoc()) { 
     $rowId = $row['id']; 

    ?> 
    /* ECHO TITLE*/  
    <b> <?php echo $row['title'] . "<br />"; ?> </b> 

    <?php 
    /* GET COMMENTS PER POSTS */ 
    $comRes = getComments($rowId); 
     while ($comRow = $comRes->fetch_assoc()) { 
    ?> 

    <!--COMMENT AREA--> 
    <div class="comments"> 
     <!--DISPLAY COMMENTS--> 
     <small> <?php echo $comRow['comment'] . "<br />";?> </small> 
    </div> 

    <?php } /* end of second while loop */ ?> 

    <input type="text" post_id="<?php echo $row['id']; ?>" id="TextBox" name="input" value="" /> 

    <?php } /* end of first while loop */ ?> 
</div> 

THIS IS MY JQUERY。每當用戶在特定POST命中<enter>應該對特定DIV /帖子顯示註釋只有

$(document).ready(function() { 
    $('input#TextBox').keyup(function (z) { 
     /* when this commentbox is entered*/ 
     if(z.keyCode == 13) { /*keyCode 13 = enter*/ 
       var post_id = $(this).attr('post_id'); /* get the post_id in the <input> box */ 
       var comment = $(this).val(); /* get the value of the <input> */ 
       $.post('../portal/comment.php', {post_id: post_id, comment: comment}); 
       $('input#TextBox').val(''); 
       $(this).parent('#content').children('.comments').append("<div>"+comment+"</div>"); 
     } 
    }); 
}); 

這一行包含了我post_id所以每當我打在我的輸入框中輸入，我的系統知道具體是什麼post im即指..

<input type="text" post_id="<?php echo $row['id']; ?>" id="TextBox" name="input" value="" /> 

Answer 1

的問題是在這條線：

$(this).parent('#content').children('.comments').append("<div>"+comment+"</div>"); 

這樣，你就追加了新的註釋文本在每個div與comments css類。

你可以像執行的東西：

<!-- Add post id to identify corresponding comment area --> 
<div class="<?php echo $rowId; ?>_comments comments"> 
    <small> <?php echo $comRow['comment'] . "<br />";?> </small> 
</div> 

在你的js

然後：

$(function() { 
    $('input#TextBox').keyup(function (z) { 
     if(z.keyCode == 13) { 
      var input = $(this); 
      var post_id = input.attr('post_id'); 
      var comment = input.val(); 
      $.post('../portal/comment.php', {post_id: post_id, comment: comment}); 
      $('input#TextBox').val(''); 
      // Append comment to the corresponding div 
      $('.' + post_id + '_comments').append("<div>"+comment+"</div>"); 
     } 
    }); 
}); 

Answer 2

問題在於你試圖區分你的評論DIVs的方式。假設你想選擇一個特殊的評論div。你怎麼能在你的網頁上做到這一點？ 使用此代碼不會給你一個特殊評論格：

$(".comments") 

你應該給每個評論DIV一個特殊的身份（這是一個簡單的HTML id）。這種方式可以輕鬆選擇，例如：

$("#comments_14") 

並且更新會變得稍微複雜一些。相反，下面一行：

$(this).parent('#content').children('.comments').append("<div>"+comment+"</div>"); 

你應該做這樣的事情：

var post_id = get post id some way; // e.g. put it in an attribute in text input 
$('#comments_' + post_id).append("<div>"+comment+"</div>");