如何有效地存储菜单项？

Question

在我的学校项目中，我们必须为一家餐馆建立一个网站，所以，一个简单的数字菜单，现在，我必须让它成为静态的，所以没有数据库。但是我运行陷入了一个问题。让我解释。我把食物分成几类（例如：饮料、食物）。我为每个带有图像的类别创建了一张简单的卡片，所以让我们以“食物”类别为例。当用户按下我制作的“查看菜单”按钮时，此列表以弹出窗口的形式显示。这里是：

但是，这是我实际保存菜单数据的一部分：

<div class="menu">
<h2>Our Menu</h2>
<ul>
     <li>
         <label>
             <input type="checkbox" name="">
             <span class="icon"></span>
             <span class="list">Fried Fish With Souce</span>
         </label>
     </li>
</ul>
</div>

如您所见，我必须为每件商品在

标签内写很多 HTML 标签，实际上必须写上价格和描述。我对写所有的项目没有问题，但我只想做一次，最大的问题是现在，我在 index.html 文件中为菜单写了所有内容，并显示：none；属性在菜单上设置，直到按下“查看菜单”按钮。我的问题是，我怎样才能有效地存储数据，以便将来甚至可以修改它。我想使用相同样式的菜单，但内容和元素数量必须因类别而异。我听说了一些关于 XML 的事情，但我不知道它在这种情况下是否有用。我希望这个问题的答案对将来的人也有帮助。提前致谢！

Answer 1

几年前类似的问题促使我开始学习PHP。

试一试 - PHP 是动态创建的语言 HTML。在 PHP 中，您可以创建页面元素的模板，然后将它们包含在另一个页面中。数据可以存储在数组中，并使用会话在页面之间检索。

有很多东西要学...您可以从 codecademy 开始，或者只是 google“PHP 课程”。

Answer 2

我会将数据本身存储在一个对象数组中（可能在本地存储中）并在文档加载时填充它，通过 JS 创建 HTML。像

const storedMenu = [{name: "Fried Fish With Souce", checked: false}, 
                    {name:"anotherName", checked: false}]

然后填充函数是这样的：

storedMenu.reduce((accumulator, currentItem) => {
    accumulator += `<label> 
         <input type="checkbox" name="">
         <span class="icon"></span>
         <span class="list">${currentItem.name}</span>
     </label>`
}, '' )

我认为这可以解决您的问题，如果您需要更多信息或更实际的代码，请告诉我

文档 reduce

如何有效地存储菜单项？

How to store menu items in an effective way?

html

html-lists