重复JS&文件夹中每个文件的JQuery代码

Repeat a part of JS & JQuery code for every file in a folder

本文关键字：文件 JQuery 代码 JS amp 文件夹 重复      更新时间：2023-09-26

我正在创建一个个人使用的仪表板，该仪表板将仅在本地（没有任何本地服务器）使用HTML+Javascript。

在一个文件夹中，我有几个.txt文件，我想阅读所有这些文件，并用这些文本中的行创建单独的选择元素。

我通过阅读其中一个文件（它在Safari和Mozilla上有效，但在Chrome上无效）完成了这项工作。

<script>
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", 'Messages/english.txt', false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                allText = allText.split("'n");
                var select = "<h4 style='color:white'>Messages</h4>";
                select += "<select class='textinputselection' style='width: 400px;'>";
                allText.forEach(function(item) {
                    select += "<option>" + item + "</option>";
                });
                select += "</select>";
                select += "<br><br>";
                $('#messages').prepend(select);
            }
        }
    }
    rawFile.send(null);
</script>

我现在想做的是，对文件夹"Messages"中的所有txt文件执行完全相同的操作，而不需要为每个文件复制粘贴代码。

您可以创建一个javascript函数，该函数在代码中只包含一次：

<script>
    function doMyThing(file){
        var rawFile = new XMLHttpRequest();
        rawFile.open("GET", file, false);
        rawFile.onreadystatechange = function ()
        {
            if(rawFile.readyState === 4)
            {
                if(rawFile.status === 200 || rawFile.status == 0)
                {
                    var allText = rawFile.responseText;
                    allText = allText.split("'n");
                    var select = "<h4 style='color:white'>Messages</h4>";
                    select += "<select class='textinputselection' style='width: 400px;'>";
                    allText.forEach(function(item) {
                        select += "<option>" + item + "</option>";
                    });
                    select += "</select>";
                    select += "<br><br>";
                    $('#messages').prepend(select);
                }
            }
        }
        rawFile.send(null);
    }
</script>

然后，每次你想运行这个，你只需要添加：

<script>
    doMyThing('Messages/english.txt');
</script>

例如：

<script>
    doMyThing('Messages/french.txt');
</script>

XMLHttpRequest()需要一个完整的路径，所以你必须使用另一个库来完成这项工作，比如jquery.file.tree，这可以帮助你。

但我建议您在服务器端获取文件的名称，并将名称发送到它们上的jquery和foreach（如果您在服务器侧处理此问题）。

如果是在客户端，请尝试file.tree获取所有名称。并将所有函数调用放在foreach函数中。

相关文章：