Question

我知道这个问题之前曾被问过一千次，我在这里读了很多帖子，但我仍然无法绕过它。在发布之前，尝试了许多自己没有成功的例子。

我基本上试图从不同的文件夹中返回图像，但我需要以特定的方式分别处理每个目录中的图像。我对json和ajax一般都不是很熟悉，所以这可能就是为什么我不太了解这一点。

无论如何，我的想法是简单地创建一个for循环，然后为每个目录，通过ajax获取图像并处理它们。

显然，这是按照我的预期工作，我在某处读到了我需要一个javascript＆＃34;关闭＆＃34;让它工作，但它永远不会奏效。这是我没有关闭的基本代码：

$.getJSON('/img/content/galleries/', function(directories) {
    for (var dirnum = 2; dirnum < directories.length - 1; dirnum++) {
        var folder = '/img/content/galleries/' + directories[dirnum] + '/';

        $.ajax({
            url: folder,
            success: function(data) {
                    $("#gallery").text("");
                    $(data).find("a").attr("href", function(i, val) {
                        if (val.match(/\.jpg|\.png|\.gif/)) {
                            $("#gallery").append("<img src='" + folder + val + "'>");
                        }
                    }); // end data.find
                } // end success
        }); // end ajax

    } // end for loop


}); // end getJSON

此代码运行但总是在gallery1（我的目录名称）之前给出gallery2的结果，然后给出一个错误，说它无法在gallery2文件夹中的gallery1中找到图像...

如果有人可以帮我在这里插入某种封闭，这将是很棒的。已浪费几个小时到目前为止没有结果。我想我不会理解这个概念。

另请注意，我之前获得了＆＃34;目录＆＃34;来自gallery1和gallery 2的父文件夹中的php文件的值，其中包含该代码：

<?php
$directories = scandir('.');
header('Content-Type: application/json');
echo json_encode($directories);
?>

或者，如果你们认为有一种更简单的方法可以在javascript中解决这个问题，我会全神贯注！我知道我可以用php混合一些javascript以不同的方式完成它但我只想在这里使用javascript。

提前致谢了。

Erick P。

Answer 1

主要缺陷是每个请求清空容器......所以只显示收到的最后一个请求的内容。

通过在请求循环开始之前清空容器来解决此问题

您无法控制收到的请求的顺序...因此，如果订单很重要，则需要对请求使用promises，以确保数据按正确顺序填充

$.getJSON('/img/content/galleries/', function(directories) {

    //empty container before starting request loop
    $("#gallery").empty(); 



    for (var dirnum = 2; dirnum < directories.length - 1; dirnum++) {


   // wrap ajax in IIFE closure
    (function(dirnum){

     var folder = '/img/content/galleries/' + directories[dirnum] + '/';

        $.ajax({
            url: folder,
            success: function(data) {
                    //$("#gallery").text("");// move up above loop
                    $(data).find("a").attr("href", function(i, val) {
                        if (val.match(/\.jpg|\.png|\.gif/)) {
                            $("#gallery").append("<img src='" + folder + val + "'>");
                        }
                    }); // end data.find
                } // end success
        }); // end ajax


     })(dirnum);//end closure in for loop

    } // end for loop


}); // end getJSON

不完全确定为什么从dirnum的第三个索引开始....假设您在directories数组中有不需要的路径。在服务器上过滤那些更清洁

Answer 2

感谢查理的帮助！每个人都告诉我，我通过关闭来修复它：

$.getJSON('/img/content/galleries/', function(directories) {
    $("#gallery").text("");
    for (var dirnum = 2; dirnum < directories.length - 1; dirnum++) {
        (function(dirnum) {
            var folder = '/img/content/galleries/' + directories[dirnum] + '/';
            $.ajax({
                url: folder,
                success: function(data) {
                        $(data).find("a").attr("href", function(i, val) {
                            if (val.match(/\.jpg|\.png|\.gif/)) {
                                $("#gallery").append("<img src='" + folder + val + "'>");
                            }
                        }); // end data.find
                    } // end success
            }); // end ajax
        })(dirnum);
    } // end for loop
}); // end getJSON

查理我也会尝试你的解决方案作为另一种选择。再次感谢！

埃里克

我无法解决问题

2 个答案: