所以我网页的输出目前看起来像这样：FOLDER1images/FOLDER1/folder1_img.jpgimages/FOLDER2/folder2_img.jpgimages/FOLDER3/folder3_img.jpgFOLDER2images/FOLDER2/folder2_img.jpgimages/FOLDER3/folder3_img.jpgFOLDER3images/FOLDER3/folder3_img.jpg但我想要实现的是：FOLDER1images/FOLDER1/folder1_img.jpgFOLDER2images/FOLDER2/folder2_img.jpgFOLDER3images/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
TA贡献1725条经验 获得超7个赞
无法完全测试所有内容，但我们的想法是遍历 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
TA贡献1805条经验 获得超10个赞
如果您的所有图像都像示例一样命名，则脚本中的这些更改可能会解决您的问题：
<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>
- 2 回答
- 0 关注
- 177 浏览
添加回答
举报
0/150
提交
取消