html - 从与前一行不相邻的新行添加新评论

Question

我有一个带有 .nameImage 类的 div。

  <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 .

第一条评论看起来像this 但是当我添加新评论时，该评论的信息(如“图像”)被附加到 first 评论的 image 并且 name 被附加到 first评论的 name 以及 comment body。

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

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

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

我用过这样的 CSS:

.nameImage{

  display:flex;
  flex-direction: row

 }

但这并不能解决问题。

如何使用 image、name 和 comment-body 在 new 行中将第二条评论与第一条评论分开。

经过一些建议，现在我得到this

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 建立。如果您发现需要唯一地定位每个单独的评论文本、图像或名称，您可以为它们分别指定一个唯一的 id，如果您愿意，也可以使用 post_id。

现在，当您添加评论时，您需要在 jQuery 中:

(1) 将一个新的空.nameImage div(一个新评论)追加到#commentCollection div。为其指定 ID comment_${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) 

无论如何，类似的东西。我写得有点快，没有测试。我希望您应该能够理解并付诸实践。不要只是复制这段代码，尝试一下，然后在没有理解它并根据需要先进行调整的情况下回来说“它不起作用”。