时间戳

首页 > 解决方案 > 如何有效地存储菜单项？

html - 如何有效地存储菜单项？

问题描述

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

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

<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>

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

标签： htmlhtml-lists

解决方案

我将数据本身存储在对象数组中（可能在本地存储中）并在文档加载时填充它，通过 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>`
}, '' )

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

减少文件

推荐阅读