#javascript #html #css #directory #subdirectory
#javascript #HTML #css #каталог #подкаталог
Вопрос:
Я работаю над школьным проектом, и мне нужно создать статический веб-сайт цифрового меню для бара. Поскольку он статичен, я использовал JavaScript там, где это было необходимо. В любом случае, я разделил все на группы, каждая группа представлена карточкой с изображением и кнопкой. Вот пример:
Это исходный код для карты:
<body>
<div id="cards">
<div class="card">
<img src="/Resources/Food.png" class="card_image">
<a href="javascript:showMenu()" class="button">
<p>FOOD</p>
</a>
</div>
</div>
</body>
Как вы можете видеть, чтобы добавить одну карточку, мне пришлось вручную написать всю структуру карточки во втором div с class=»card» .
НО я должен создавать его динамически на основе структуры вложенных папок внутри корневой папки, которая называется Resources, вот схема:
Для достижения этой цели я начал использовать JavaScript, поскольку, на мой взгляд, это единственный возможный способ:
<script type="text/javascript">
function showMenu()
{
var content = `
<div class="card">
<img src="/Resources/Food.png" class="card_image">
<a href="javascript:showMenu()" class="button">
<p>FOOD</p>
</a>
</div>`;
document.querySelector("#cards").innerHTML = content;
}
</script>
Итак, теперь, когда я изложил, что мне нужно сделать, это следующее: в коде JavaScript вы можете видеть, что карточка в любом случае была сгенерирована вручную, но мне нужно, чтобы содержимое создавалось на основе структуры папок, которую я сохранил локально. Другими словами, весь скрипт должен вводить имя / путь к КОРНЕВОЙ папке, которая называется «Ресурсы», и оттуда он должен генерировать группы на основе ее содержимого. Например, если я нажму кнопку на карточке с ЕДОЙ, тогда она должна удалить карточки с ЕДОЙ и НАПИТКАМИ и добавить только карточку овощей в этом случае…Я знаю, это звучит сложно, но в конце концов проблема заключается в получении имен вложенных папок, а поскольку изображение имеет то же имя, что и вложенная папка, примените его к <img> тегу, а также к кнопке. Все это с использованием JavaScript. Если вы знаете, что какой-то другой язык будет работать намного лучше, я открыт для предложений, но до сих пор я создавал весь веб-сайт только с использованием JavaScript.
В любом случае, я попытался выразить проблему как можно лучше, поэтому, если что-то неясно, я могу легко изменить сообщение, если это необходимо. Заранее спасибо!
Комментарии:
1. JavaScript не может получить доступ к локальной файловой системе.
2. @Teemu даже если все папки будут находиться на сервере? Какой язык будет работать лучше или как я могу подойти к этому лучше?
3. JavaScript (запущенный в браузере) также не может получить доступ к файловой системе сервера. Вам необходимо получить доступ к файловой системе на вашем сервере, а затем отправить содержимое файловой системы клиенту в виде структуры данных.
4. Это задание для сервера приложений. Вы можете Google «сервер приложений» для получения дополнительной информации
5. @Teemu да, но как только клиент нажимает на кнопку, не могу ли я (сервер) получить запрос и отправить новый HTML-контент, который будет заменен на стороне клиента?
Ответ №1:
Вы можете поместить данные изображения в объект JSON, а затем связать связанные функции обработки в соответствии с требованиями.