AJAX Как мне перебрать содержимое каждой папки без повторов? - PullRequest
Новая
       4

AJAX Как мне перебрать содержимое каждой папки без повторов?

1 голос
/ 02 июля 2019

Таким образом, вывод моей веб-страницы в настоящее время выглядит так: 

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 ]

1 голос
/ 02 июля 2019

не смог полностью протестировать все, но идея в том, что вместо того, чтобы перебирать папки в 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>
0 голосов
/ 02 июля 2019

Если все ваши изображения названы как в примере, вероятно, эти изменения в вашем скрипте решат вашу проблему: 

    <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...