如何获取根文件夹中的所有子文件夹名称并创建 HTML 内容？答案

【问题标题】：How to get all the subfolders name within a ROOT Folder and create HTML Content?如何获取根文件夹中的所有子文件夹名称并创建 HTML 内容？
【发布时间】：2021-02-12 06:24:42
【问题描述】：

我正在做一个学校项目，我必须为酒吧做一个静态数字菜单网站。因为它是静态的，所以我在必要时使用了 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"。但是，我必须根据根文件夹内的子文件夹的结构动态创建它，称为资源，这是一个方案：

为了实现这一点，我开始使用 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 构建了整个网站。无论如何，我试图尽我所能表达问题，所以如果有不清楚的地方，我可以在需要时轻松修改帖子。提前致谢！

【问题讨论】：

JavaScript 无法访问本地文件系统。
@Teemu 即使所有文件夹都将在服务器上？哪种语言会更好，或者我该如何以更好的方式解决这个问题？
JavaScript（在浏览器中运行）也无法访问服务器的文件系统。您需要访问服务器上的文件系统，然后将文件系统内容作为数据结构发送到客户端。
这是一个应用服务器的工作。您可以谷歌“应用程序服务器”了解更多
@Teemu 是的，但是一旦客户端点击一个按钮，我（服务器）不能接收请求并发送将在客户端替换的新 HTML 内容吗？

标签： javascript html css directory subdirectory

【解决方案1】：

您可以将图像数据放入一个JSON对象中，然后根据需要绑定相关的处理函数。

【讨论】：