PHP While循环中Closing </div>标签提前输出问题求助

我开发了一个图片板预览功能，用于输出用户图库中的前4张图片。通过while循环及$imgcount变量控制最多输出4张图片，预期在第4张图片后输出闭合</div>标签以闭合.board-component容器。若用户有更多图片板，也需在同一循环中按相同逻辑输出。

问题现象 #

闭合</div>标签在第一张图片后就被输出，后续3张图片被输出到下一个.board-component容器之前。未出现PHP错误，判断为条件逻辑错误。

相关代码 #

<div class="column">
    <?php

        $s = "SELECT boards.board_name, boards.board_id, images.filename
        FROM boards
        INNER JOIN boards_images ON boards_images.board_id = boards.board_id
        INNER JOIN images        ON boards_images.image_id = images.image_id
        WHERE boards.user_id = :user_id";

        $stmt = $connection->prepare($s);
        $stmt -> execute([
            ':user_id' => $db_id  // $db_id is from a $_SESSION login value
        ]);

        $dbBoardname_last = '';
        $imgcount = 0;

        while ($row = $stmt->fetch()) {

            $dbBoardname = htmlspecialchars($row['board_name']);
            $dbImageFile = "$wwwRoot/images-lib/" . htmlspecialchars($row['filename']);

            //if the board name is the same as the previous $row only add images. 
            if($dbBoardname != $dbBoardname_last) {

                //reset the image count for new boards
                $imgcount = 0;

                echo "
                <div class='board-component'>
                    <h2>{$dbBoardname}</h2>
                ";
            }

            // if less than 4 images   
            if($imgcount < 4) { 
                echo "
                <img src='{$dbImageFile}'>
                ";
            }

            $imgcount+=1;
            
            // close the board component div
            if($dbBoardname != $dbBoardname_last) {
                echo "
                </div>
                ";
            }
            //record the last board_name to check if a new board element should be created
            $dbBoardname_last = $dbBoardname;
        } 
    ?>
</div>

实际输出 #

<div class='board-component'>
    <h2>The Board Name</h2>
    <img src="path/to/image1.jpg">
</div> <!-- the component closes here after the 1st image, instead of after the 4th image -->
<img src="path/to/image2.jpg">
<img src="path/to/image3.jpg">
<img src="path/to/image4.jpg">

<div class='board-component'> <!-- next board component -->
...

预期输出 #

<div class='board-component'>
    <h2>The Board Name</h2>
    <img src="path/to/image1.jpg">
    <img src="path/to/image2.jpg">
    <img src="path/to/image3.jpg">
    <img src="path/to/image4.jpg">
</div> <!-- the component should close here -->

<div class='board-component'> <!-- next board component -->
...

问题原因与修复 #

问题出在闭合</div>的判断条件上——你现在是在当前行的板名称和上一行不同时就闭合容器，而这个条件只会在每个板的第一行数据时触发，所以第一张图片后就直接闭合了容器。

正确的逻辑应该是：

1. 当遇到新的板时，如果之前已经有未闭合的板容器，先把它闭合（处理上一个板的收尾）
2. 每个板的容器要在切换到新板，或者循环结束遍历完当前板所有图片时才闭合

修改后的代码如下：

<div class="column">
    <?php

        $s = "SELECT boards.board_name, boards.board_id, images.filename
        FROM boards
        INNER JOIN boards_images ON boards_images.board_id = boards.board_id
        INNER JOIN images        ON boards_images.image_id = images.image_id
        WHERE boards.user_id = :user_id";

        $stmt = $connection->prepare($s);
        $stmt -> execute([
            ':user_id' => $db_id  // $db_id is from a $_SESSION login value
        ]);

        $dbBoardname_last = '';
        $imgcount = 0;
        $is_open_component = false; // 标记是否有未闭合的板容器

        while ($row = $stmt->fetch()) {

            $dbBoardname = htmlspecialchars($row['board_name']);
            $dbImageFile = "$wwwRoot/images-lib/" . htmlspecialchars($row['filename']);

            // 遇到新板时，先闭合上一个未关闭的容器
            if($dbBoardname != $dbBoardname_last) {
                if ($is_open_component) {
                    echo "
                    </div>
                    ";
                }
                // 重置计数，打开新容器
                $imgcount = 0;
                $is_open_component = true;
                echo "
                <div class='board-component'>
                    <h2>{$dbBoardname}</h2>
                ";
            }

            // 输出不超过4张图片
            if($imgcount < 4) { 
                echo "
                <img src='{$dbImageFile}'>
                ";
            }

            $imgcount+=1;
            
            // 更新上一个板名称
            $dbBoardname_last = $dbBoardname;
        } 

        // 循环结束后，闭合最后一个未关闭的容器
        if ($is_open_component) {
            echo "
            </div>
            ";
        }
    ?>
</div>

修复说明 #

• 新增$is_open_component变量跟踪是否有未闭合的板容器，避免漏闭合或提前闭合
• 遇到新板时先检查并闭合上一个容器，再创建新容器
• 循环结束后额外检查一次，确保最后一个板的容器被正确闭合
• 移除了原来错误的闭合条件，改为在切换板和循环结束时统一处理容器闭合

内容的提问来源于stack exchange，提问作者paulo77