AJAX 如何在不重复的情况下循环遍历每个文件夹的内容？
[英]AJAX How do I loop through the contents of each folder without repetitions?
问题描述
So the output of my webpage currently looks like this:
所以我网页的输出目前看起来像这样：
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
But what I want to achieve is this:但我想要实现的是：
FOLDER1
images/FOLDER1/folder1_img.jpg
FOLDER2
images/FOLDER2/folder2_img.jpg
FOLDER3
images/FOLDER3/folder3_img.jpg
I want to display images from my folders, but images must be displayed only under their containing folders (instead my error code has every image bundled together and looping like steps which is NOT what I want).我想显示我的文件夹中的图像，但图像必须只显示在它们包含的文件夹下（相反，我的错误代码将每个图像捆绑在一起并像步骤一样循环，这不是我想要的）。 I don't know what I am doing wrong.我不知道我做错了什么。 Can somebody PLEASE help me fix this?有人可以帮我解决这个问题吗？ I've been at it all day and desperately need help.我一整天都在做这件事，迫切需要帮助。 Thank you.谢谢你。
This is the full code:这是完整的代码：
<!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 个解决方案
解决方案1
1 已采纳 2019-07-01 23:21:47
wasn't able to test everything completely, but the idea is that instead iterating through the folders in php, we instead store them as a global variable in javascript.无法完全测试所有内容，但我们的想法是遍历 php 中的文件夹，而是将它们存储为 javascript 中的全局变量。
we then create function that will take a number as an index to get the folder name from the folders array and will make the javascript call to get the information from the url.然后我们创建一个函数，它将一个数字作为索引，从文件夹数组中获取文件夹名称，并将进行 javascript 调用以从 url 获取信息。
this will in turn create the necessary image elements to be displayed, and will recursively call the same function to get the images for the next item in the array until it reaches the last one.这将依次创建要显示的必要图像元素，并将递归调用相同的函数以获取数组中下一项的图像，直到到达最后一项。
this can be refactored to look better.这可以重构以看起来更好。
see below and i hope it helps.见下文，我希望它有所帮助。
<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>
解决方案2
0 2019-07-01 23:02:32
If all your images are named like the example, probably these changes in your script solve your problem:如果您的所有图像都像示例一样命名，则脚本中的这些更改可能会解决您的问题：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.