Как эффективно хранить пункты меню?

ProgramBox

Как эффективно хранить пункты меню?

Post author:admin
Запись опубликована:28 февраля, 2023
Post category:Вопросы по программированию

#html #html-lists

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

Как вы можете видеть, мне нужно написать много HTML-тегов, содержащихся в тегах < li > для КАЖДОГО элемента, на самом деле должны быть написаны цена и описание. У меня нет проблем с записью всех элементов, но я хочу сделать это только один раз, И самая большая проблема в том, что пока я пишу все для меню ВНУТРИ index.html файл с отображением: нет; свойство устанавливается в меню до тех пор, пока не будет нажата кнопка «Просмотреть меню». Мой вопрос в том, как я могу эффективно хранить данные, чтобы я мог даже изменять их в будущем. Я хочу использовать тот же стиль меню, но содержимое и количество элементов должны меняться от категории к категории. Я что-то слышал о XML, но я не знаю, полезно ли это в данном случае. Я надеюсь, что ответ на этот вопрос поможет кому-то и в будущем. Заранее спасибо!

Ответ №1:

Я сохраню сами данные в массиве объектов (возможно, в локальном хранилище) и заполню их при загрузке документа, создав HTML с помощью JS. что-то вроде

 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>`
}, '' )

Я думаю, что это решает вашу проблему, если вам нужна дополнительная информация или более реалистичный код, просто дайте мне знать

Документация для уменьшения

1. Я знал, что где-то есть ответ, я просто не знал ответа. Я собираюсь попытаться реализовать это, на случай, если мне понадобится помощь, я собираюсь прокомментировать здесь. Вы спасли меня от изучения PHP с нуля. Большое спасибо!

2. рад помочь, дайте мне знать, если вам нужна дополнительная помощь или разъяснения

3. Эй, мне нужна небольшая помощь, и это все. После добавления вашего кода мне пришлось его адаптировать, и это ссылка на результат. Исходный код — это ссылка . Как вы можете видеть, document.write создает своего рода новую страницу, но я хочу, чтобы стиль внутри файла css применялся к тегам и сохранял оригинал index.html страницу, чтобы не перезаписывать ее. Функция showMenu() JavaScript вызывается событием onclick=»» на кнопке. Спасибо.

Ответ №2:

Несколько лет назад проблема, похожая на эту, побудила меня начать изучать PHP.

Попробуйте — PHP — это язык для динамического создания HTML. В PHP вы можете создавать шаблоны элементов страницы, а затем включать их в другую страницу. Данные могут храниться в массивах и извлекаться между страницами с помощью сеансов.

Многому нужно научиться… Вы можете начать с codecademy или просто погуглить «Курс PHP».