0

我正在制作一个演示餐厅菜单订单页面。每个选定的菜单项都被推入一个会话数组（仅存储项目 ID）。然后我显示订单以进行确认。

我通过从数据库中提取行来动态创建和填充具有菜单项详细信息的 div，其中 1 行进入 1 个 div（彼此堆叠）。在每 4 个项目之后，我开始一个新的“列” - 一个浮动在第一个“列”/包含 div 旁边的包含 div，接下来的 4 个项目放在这个包含 div 中。每 12 个项目后，我开始一个新页面（比如开始一个新表）。所以页面上的排列是 3 列，每列 4 行。

我提供了从订单中删除菜单项的选项。我可以从数组中删除项目，但是当页面重新加载时，项目所在的位置有一个空白空间，并且我用于跟踪每 4 行或 12 行的计数系统不会重置，因此添加新项目或删除项目会搞砸我设置的 4 行系统。

有没有办法在每次删除项目时“移动”项目/重新填充 div，以便没有空格并且每个“列”总是最多 4 个项目？

我也可以使用一个实际的表格来显示项目（而不是 div），如果这样可以更容易地“移动”项目。

我是 PHP 新手，所以我编写的代码可能不是最好的方法（我还在学习！）

<section data-state="order">

<div class="pageContainer">

    <div class="menuColumn">
        <?php   
            // loop through session order array                                                 
            foreach ($_SESSION['order'] as $key => $value) {

                // get info from db for items in array
                $query = "SELECT id, name, price, image FROM tblMenuItems WHERE id = '$value'";

                $result = @mysqli_query($connect_db,$query);        

                while ($row = mysqli_fetch_row($result)) {
                    // store data in variables
                    $id = stripslashes($row[0]);
                    $name = stripslashes($row[1]);
                    $price = stripslashes($row[2]);
                    $image = stripslashes($row[3]);

                    $total += $price;

                    // after 4 items, start a new 'column'                              
                    if ($key % 4 == 0 && $key != 0) {
                        echo '
                        </div> <!-- end .menuColumn -->

                        <div class="menuColumn">
                        ';
                    }

                    // after 12 items, start a new section (page)
                    if ($key % 12 == 0 && $key != 0) {
                        echo '
                            </div> <!-- end .menuColumn -->
                            </div> <!-- end .pageContainer -->
                            </section> <!-- end section -->

                            <section data-state="order">
                            <div class="pageContainer">
                            <div class="menuColumn">';
                    }

                    // display ordered items and info on page
                    echo '
                    <form action="#" method="post">
                        <div class="menuItem">
                            <img class="imgMenuItem" src="images/'.$image.'" alt="Menu Item">
                            <h4>'.$name.'</h4> 
                            <h5>$'.$price.'</h5>
                            <input type="submit" name="btnRemoveItem" class="btnRemoveItem" value="Remove Item">    
                            <input type="hidden" name="remove" value="'.$id.'">           
                        </div> <!-- end .menuItem -->
                    </form>

                    <br class="clear">
                    ';
                } // end while

            } // end foreach 

        ?>

    </div> <!-- end .menuColumn -->

</div> <!-- end .pageContainer -->

要从数组中删除一个项目，我在页面顶部有这个：

<?php
if (isset($_POST['btnRemoveItem'])) {       
    // remove menu item from array (including all multiples)
    foreach (array_keys($_SESSION['order'], $_POST['remove']) as $remove) {
        unset($_SESSION['order'][$remove]);         
    }
}

?>

4

1 回答 1

0

而不是unset()您可以将键设置为null，当您遍历数组时检查它是否为空并在该位置呈现一个空白 div。

于 2013-03-06T00:00:56.947 回答