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 image...

问题:

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>

回答1:

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.

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.

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:

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>
  • 发表于 2019-07-06 23:00
  • 阅读 ( 242 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除