如何在分隔的div中显示带有注释的所有相关图像，并在php中为新条目重复主div? [英] How to display all related images with a comment in separated div and repeat the main div for a new entry in php?

问题描述

我想在一个框中同时显示注释的所有相关图像，但要在不同的div中显示注释.类似于我附加的图像.

I want to display all the related images for a comment in a box together but display the comments in a different div Something like on the image that I have attached.

如果有新帖子，请使用PHP重复主div.

If there is a new post then repeat the main div with PHP.

我不知道该怎么办. 我认为我必须打破某个地方的循环.

I can't figure out how should I do this. I assume that I have to break the loop somewhere.

数据库结构

帖子:

| commentid |  comment  | iamgesid |
------------------------------------
|     1     |   fool    |   5557   |
|     2     |  fool2    |   5585   |
------------------------------------

多张图片:

multiple_image:

| id |  image  | imagesid |
---------------------------
| 1  |  name1  |    5557  |
| 2  |  name2  |    5557  |
| 3  |  name3  |    5585  |
---------------------------

我想要这样的东西

I want something like this

.main {
  background-color: #e3e3e3;
  width: 400px;
  padding: 5px 4px;
  margin-bottom: 10px;
  border-radius: 2px;
}

.comments {
  padding: 10px;
  background-color: #eee;
}

.pics {
  padding: 10px;
  background-color: #c3c3c3;
}

<div class='main'>
  <div class='comments'>
    Related Comment here
  </div>
  <div class='pics'>
    Related Images here
  </div>
</div>
<!-- repeat the same thing with a new post -->
<div class='main'>
  <div class='comments'>
    Related Comment here
  </div>
  <div class='pics'>
    Related Images here
  </div>
</div>
<!-- etc -->
<div class='main'>
  <div class='comments'>
    Related Comment here
  </div>
  <div class='pics'>
    Related Images here
  </div>
</div>

获取图像的代码和相关注释

The code for fetching images and the related comment

$sql = "SELECT * FROM images
    JOIN posts ON (images.imagesid=posts.imgs)
    ORDER BY  postID";
  $result = $conn->query($sql);
  if (!$result) {
      trigger_error('Invalid query: ' . $conn->error);
  }

  if ($result->num_rows > 0) {
    // output data of each row
    $comment = '';
    while($row = $result->fetch_assoc()) {
      if ($row['name'] == NULL) {
        $imgs= '';
      } else {
        $imgs= "<img width='' src='../images/".$row['name']."' >";
      }

  if($comment != $row['content']){
      echo $row['content'];
     $comment = $row['content'];
  }
    echo $imgs;
  } 

 }

推荐答案

无法跟踪您的转发，很抱歉花了很长时间才回复您.工作受到干扰.您的代码与数据库列不匹配，因此我不确定您的数据库示例正确还是代码正确.我猜到了数据库，但是如果我猜错了，您将不得不替换适当的数据库字段.

Had to track down your repost, sorry it took so long to get back to you. Work interfered. Your code doesn't match your database columns, so I'm not sure weather your database example is correct, or your code. I guessed database, but if I guessed wrong you'll have to replace the appropriate database fields.

我简化了您的数据库查询，因为我认为，了解它们的作用比提高效率更为重要.

I simplified your database queries, because I think it's more important that you understand what they are doing, than it is to be efficient.

$sql = "SELECT * FROM multiple_image";
  $result = $conn->query($sql);
  if (!$result) {
      trigger_error('Invalid query: ' . $conn->error);
  }

  if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $imgs[$row['imageid]][$row['id']]= "<img width='' src='../images/".$row['name']."' >"; // array of image id's, with arrays of images inside them.
  } 

 }
$sql = "SELECT * FROM posts";
  $result = $conn->query($sql);
  if (!$result) {
      trigger_error('Invalid query: ' . $conn->error);
  }

  if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
      $commentsToImages[$row['commentid']] = $row['imagesid']; // array of post id's to picture ids
      $comments[$row['commentid']] = $row['comment']; // array of post id's to comment text.
  } 

 }

现在，您只需要渲染漂亮的新数组即可.

Now you just need to render your nice new arrays.

foreach($commentsToImages as $commentID =>$imagesID) {
    ?>
<div class='main'>
  <div class='comments'>


<?php echo $comments[$commentID]; // render the comment ?>
  </div>
  <div class='pics'>
    <?php
          foreach($imgs[$imagesID] as $img) { // foreach loop that will render all the images...
                  echo $img;
          }
    ?>
  </div>
</div>

<?php
}
?>

其中可能有一两个错字，但是该代码应该可以执行您想要的操作.我要澄清的是，这不是最好的方法.它不遵循最佳实践，也不是最有效的.但是，如果您只是学习每个循环，那么它需要学习的东西最少.

There is probably a typo or two in there, but that code should do what you want. I should clarify that this is not the best way to do this. It doesn't follow best practices, nor is it the most efficient. But if you are just learning for each loops, It requires the least new things to learn.

1. 简单的数据库查询.
2. 数组
3. 每个循环.
4. 如果则声明.

您应该返回并添加if语句，以捕获各种潜在的错误.我不知道您的数据库是否允许例如空值，但是它们可能会引起麻烦.但这两种方式都会起作用.

You SHOULD go back and add if then statements to catch the various potential errors. I don't know if your database allows null values for example, but they could throw a wrench. But it will work either way.

这篇关于如何在分隔的div中显示带有注释的所有相关图像，并在php中为新条目重复主div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！