时间戳

首页 > 解决方案 > 如何显示来自多个文件夹 AJAX 的图像

jquery - 如何显示来自多个文件夹 AJAX 的图像

问题描述

我正在尝试显示 3 个名为FOLDER1、FOLDER2和的文件夹中的图像FOLDER3。我正在尝试使用 afor loop逐步循环遍历每个文件夹，并将它们的每个内容显示在单独的 div 中，这些 div 分类在它们相应的文件夹名称下。但是我拥有的代码无法做到这一点。出于某种原因，for 循环仅循环遍历FOLDER3文件夹并完全跳过FOLDER1，FOLDER2尽管内容文件名和FOLDER1显示FOLDER2为损坏的图像（这太令人困惑了）！也许我错过了应该添加到我的 AJAX 代码以使其工作的行？

这是我想要达到的结果：

FOLDER1
images/FOLDER1/folder1_img.jpg

FOLDER2
images/FOLDER2/folder2_img.jpg

FOLDER3
images/FOLDER3/folder3_img.jpg

但是 - 这是我目前的结果：

FOLDER1
images/FOLDER3/folder1_img.jpg

FOLDER2
images/FOLDER3/folder2_img.jpg

FOLDER3
images/FOLDER3/folder3_img.jpg

这是我的完整代码：

HTML 脚本：

<!DOCTYPE html>
<html>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<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>
        <?php endforeach; ?>
    </div>
</div>
</body>
</html>

AJAX 脚本：

<script>
for (n = 1; n < 4; n++) {
    var folder = "images/FOLDER"+n+"/";

    $.ajax({
      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>

请，如果有人可以在这里帮助我，我将不胜感激。谢谢

标签： jqueryajaxfor-loop

解决方案

在 ajax 请求中添加 async: false 。

推荐阅读