Question

我的JQUERY遇到了一些麻烦。

基本上，我有这种facebook风格的帖子。每个帖子都有<input>框，其中成员可以发表评论。当用户点击我的jquery（AJAX）<enter>时，将获取提交的评论并将其保存在我的数据库中。

评论应立即显示在发表评论的特定<DIV>中。

我的问题是，每当我对特定 POST 提交评论时，我发表的评论都会更新为所有我的帖子。它只会在我点击刷新时消失。

这是我的<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>

这是我的观察。每当用户在特定POST上点击<enter>时，它应仅在该特定DIV / POSTS上显示评论

$(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所以无论何时我在输入框中输入，我的系统都会知道我所指的具体帖子..

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

Answer 1

问题在于您尝试区分评论DIV的方式。假设您要选择特殊注释div。你怎么能在你的网页上做到这一点？使用此代码不会为您提供特殊注释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>");

Answer 2

问题在于这一行：

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

如何在JQUERY中的特定DIV中附加数据

2 个答案: