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和s comment-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 但是，当我添加新评论时，该评论的信息（例如“图像”）将被附加到第一评论的image上，而name则将被附加第一评论的name以及comment body。

当我在有第一条评论的情况下添加新评论时，它变成类似于this

您可以看到第二个image的{{1}}被附加到第一个评论的图像附近。

我想从新行中添加新评论，或者您可以说新股利。

我使用了CSS这样的东西：

comment

但这不能解决问题。

如何通过<{>> 行中的.nameImage{ display:flex; flex-direction: row }，image和name使第二条评论与第一条评论分开。

经过一些建议，现在我得到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中的外观。每个评论的唯一性是由其父项div建立的，该父项具有唯一的id。如果发现需要分别查找每个单独的注释文本，图像或名称，则可以根据需要使用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)

反正就是这样。我很快就写了以上内容，但没有对其进行测试。我希望您应该能够理解并付诸实践。不要只是复制这段代码，尝试一下，然后在不了解它并根据需要进行调整的情况下说“它不起作用”。

从不与上一行相邻的新行添加新评论

1 个答案: