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>
心有法竹2回答
-
qq_遁去的一_1
无法完全测试所有内容，但我们的想法是遍历 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> -
holdtom
如果您的所有图像都像示例一样命名，则脚本中的这些更改可能会解决您的问题： <script> var floder = '<?php echo $item; ?>'; var path = `images/${folder}/`; $.ajax({ async: false, url : path, success: function (data) { $(data).find("a").attr("href", function (i, val) { var imageFolder = val.split("_"); imageFolder = imageFolder[0].toUpperCase(); if( val.match(/\.(jpe?g|png|gif)$/) && imageFolder == folder) { $(".prodfx").append( "<img src='"+ folder + val +"'>" ); } }); } }); </script>
随时随地看视频慕课网APP
PHP