从不与前一行相邻的新行添加新注释

Question

我有一个div.nameImage类。

<div class="nameImage" style="border:1px solid black;">
<div class="image_{{$post->p_id}}"></div>
<div class="name_{{$post->p_id}}"></div>
<div class="show_comments_{{ $post->p_id }}"></div>
</div>

这三件事image，name和scomment-body来自response()->json([,,])，我将它们附加如下：

$(".image_"+post_id).append( "<img style = 'width:30px;height:30px;border-radius:50%;' src='"+ folder + data.user_image +"'>" )
$(".name_"+post_id).append(data.name)
$(".show_comments_"+post_id).append(data.msg) 

在那个div我附加了用户的image，当有人发表评论时，用户的name和comment-body，所有这三件事都进入了上面的div .

第一条评论看起来像这样 但是当我添加新评论时，该评论的信息(如"图像")将附加到第一条评论的image，而name附有第一条评论的name，因此comment body。

当我在第一条评论出现的情况下添加新评论时，它会变成这样

您可以看到第二个comment的image附加到第一个评论的图像旁边。

我想从新行添加新评论，或者您可以说新的div。

我使用了像这样的东西：

.nameImage{
display:flex;
flex-direction: row
}

但这并不能解决问题。

我怎样才能将第二条评论与第一条评论分开，在新行中使用image、name和comment-body.

经过一些建议，现在我明白了

Answer 1

我不知道你显示评论的整体方案是什么，但这里有一种方法可以做我认为你想要的。

首先，您需要一个保存注释集合的div。该div将包含评论意见，每条评论意见都是一个div，其中包含单个评论所需的所有要素：

<div id='commentCollection'>
<!-- first comment -->
<div class="nameImage" id="comment_#" style="border:1px solid black;">
<div class="comment_image"></div>
<div class="comment_name"></div>
<div class="comment_text"></div>
</div>
... <!-- more comments -->
</div>

请注意，我为每个评论包含一个唯一的id，id是"comment_#"。您可以将post_id用于 #。保持页面上的所有 id 唯一非常重要。这就是id的意义.类应该是通用的，通常不是唯一的。这些用于控制给定类的整个元素组/集合的 CSS 属性。为此，我创建了类comment_image、comment_name和comment_text，以便您可以控制这些类在 CSS 中的外观。它们是唯一性的每条评论是由具有唯一id的父div建立的。如果您发现需要唯一地查找每个单独的注释文本、图像或名称，您可以根据需要使用post_id为它们提供唯一的id。

现在，当您添加注释时，在jQuery中，您需要：

(1)在#commentCollectiondiv中附加一个新的空.nameImagediv(新注释)。给它 idcomment_${post_id}.

(2) 将您的图像、名称和评论文本附加到该新评论div：

$(`#comment_${post_id} > div.comment_image`).append( "<img style = 'width:30px;height:30px;border-radius:50%;' src='"+ folder + data.user_image +"'>" )
$(`#comment_${post_id} > div.comment_name`).append(data.name)
$(`#comment_${post_id} > div.comment_text`).append(data.msg) 

无论如何，类似的东西。我写了上面的内容，没有测试它。我希望你应该能够理解这个想法并运行它。不要只是复制此代码，尝试一下，然后返回并说"它不起作用"，而不理解它并首先根据需要进行调整。