javascript - 清除和更改div的内容

Question

我试图通过再次加载并替换旧评论来用新评论替换评论 div 的内容。当我更改 div 的内容时，它仅替换第一个评论并重复整个评论:

这里是评论部分:

<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$post_row[id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){ 
?>
<div id="comments_div">
    <div style="background:#aaaaaa; margin:5px;">
        <p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
        <p>user: <?php echo $comment_row['user_id']; ?></p>
        <p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p> 
        <p>content: <?php echo $comment_row['content']; ?></p>
        <?php if($post_row['user_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
             <p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
        <?php } ?>
    </div>
</div>
<?php } ?>

ajax代码:

/////////////////////////comment function
function comment(post_id, poster_id)
{
loadXMLDoc("php/comment.php?post_id="+post_id+" content="+document.getElementById("content").value+"&poster_id="+poster_id,function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("comments_div").innerHTML = xmlhttp.responseText;
    }
  });
}

评论.php:

<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$_GET[post_id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){ 
?>
    <div style="background:#aaaaaa; margin:5px;" class="comment">
        <p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
        <p>user: <?php echo $comment_row['user_id']; ?></p>
        <p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p> 
        <p>content: <?php echo $comment_row['content']; ?></p>
        <?php if($_GET['poster_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
             <p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
        <?php } ?>
    </div>
<?php } ?>

Answer 1

您的第一个代码段是为每条评论创建一个单独的comments_div。那么您的 JavaScript 代码片段只是替换第一个代码片段的内容。

您可以通过将 comments_div 放在 PHP while 循环外部来修复此问题，然后在该循​​环内使用相同的 HTML 输出代码正如您在第三个示例中一样(每个评论一个 div.comment)。

所以，用这样的东西代替第一个代码片段:

<div id="comments_div">
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$post_row[id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){ 
?>
    <div style="background:#aaaaaa; margin:5px;" class="comment">
        <p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
        <p>user: <?php echo $comment_row['user_id']; ?></p>
        <p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p> 
        <p>content: <?php echo $comment_row['content']; ?></p>
        <?php if($_GET['poster_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
             <p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
        <?php } ?>
    </div>
<?php } ?>
</div>