时间戳

首页 > 解决方案 > AJAX 如何循环浏览每个文件夹的内容而不重复？

php - AJAX 如何循环浏览每个文件夹的内容而不重复？

问题描述

所以我的网页的输出目前看起来像这样：

FOLDER1
images/FOLDER1/folder1_img.jpg
images/FOLDER2/folder2_img.jpg
images/FOLDER3/folder3_img.jpg

FOLDER2
images/FOLDER2/folder2_img.jpg
images/FOLDER3/folder3_img.jpg

FOLDER3
images/FOLDER3/folder3_img.jpg

但我想要实现的是：

FOLDER1
images/FOLDER1/folder1_img.jpg

FOLDER2
images/FOLDER2/folder2_img.jpg

FOLDER3
images/FOLDER3/folder3_img.jpg

我想显示我的文件夹中的图像，但图像必须仅显示在其包含的文件夹下（相反，我的错误代码将每个图像捆绑在一起并像步骤一样循环，这不是我想要的）。我不知道我做错了什么。有人可以帮我解决这个问题吗？我整天都在做这件事，迫切需要帮助。谢谢你。

这是完整的代码：

<!DOCTYPE html>
<html>
<body>
<div class="wflex">
    <div class="wscdfx">
        <?php $items = array("FOLDER1", "FOLDER2", "FOLDER3"); ?>
        <?php foreach ($items as $item): ?>
            <div class="spct"><?php echo $item; ?></div>
            <div class="prodfx"></div>
    </div>
</div>
            <script>
            var folder = "images/<?php echo $item; ?>/";

            $.ajax({
                async: false,
                url : folder,
                success: function (data) {
                  $(data).find("a").attr("href", function (i, val) {
                      if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                          $(".prodfx").append( "<img src='"+ folder + val +"'>" );
                      } 
                  });
                }
            });
            </script>
        <?php endforeach; ?>
</body>
</html>

标签： phpjqueryajax

解决方案

无法完全测试所有内容，但我们的想法是在 php 中遍历文件夹，而是将它们存储为 javascript 中的全局变量。

然后我们创建一个函数，该函数将一个数字作为索引，以从文件夹数组中获取文件夹名称，并将调用 javascript 以从 url 获取信息。

这将反过来创建要显示的必要图像元素，并将递归调用相同的函数以获取数组中下一项的图像，直到到达最后一项。

这可以重构以看起来更好。

见下文，我希望它有所帮助。

<div class="wflex">
    <div class="wscdfx">

    </div>
</div>
<script type="text/javascript">
var items = <?php echo json_encode($items)?>;


function getFileNames(i) {
    if(i >= items.length) {
        return;
    }
     var folder = "images/"+items[i];

    $.ajax({
        async: true,
        url : folder,
        success: function (data) {
            var divNameEl = $('<div class="spct" />').html(items[i]);
            $('.wscdfx').append(divNameEl);
            var divEl = $('<div class="prodfx" />');
            $(data).find("a").attr("href", function (i, val) {
                console.log(i,val);
                if( val.match(/\.(jpe?g|png|gif)$/) ) {

                    divEl.append( "<img src='"+ folder + val +"'>" );

                    $('.wscdfx').append(divEl);
                }
            });

            getFileNames(i+1);
        }
    });
}

getFileNames(0);
</script>

推荐阅读