Question

所以我网页的输出当前如下所示：

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>

Answer 1

无法完全测试所有内容，但是其想法是，要遍历php中的文件夹，而是将它们作为全局变量存储在javascript中。

然后，我们创建一个函数，该函数将一个数字作为索引来从folders数组中获取文件夹名称，并将进行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>

Answer 2

如果所有图像都像示例中那样命名，则脚本中的这些更改可能可以解决您的问题：

using System;
using System.IO;
using Amazon;
using Amazon.SecretsManager;
using Amazon.SecretsManager.Model;

namespace AssetView.Contacts.WebApi
{
    public static class SecretManager
    {
        public static string GetSecret(string secretName, string region)
        {
            //string secretName = "av/connectionstring/dev";
            // region = "us-east-1";
            string secret = "";

            MemoryStream memoryStream = new MemoryStream();

            IAmazonSecretsManager client = new AmazonSecretsManagerClient(RegionEndpoint.GetBySystemName(region));

            GetSecretValueRequest request = new GetSecretValueRequest();
            request.SecretId = secretName;
            //request.VersionStage = "AWSCURRENT"; // VersionStage defaults to AWSCURRENT if unspecified.

            GetSecretValueResponse response = null;

            // In this sample we only handle the specific exceptions for the 'GetSecretValue' API.
            // See https://docs.aws.amazon.com/secretsmanager/latest/apireference/API_GetSecretValue.html
            // We rethrow the exception by default.

            try
            {
                response = client.GetSecretValueAsync(request).Result;
            }
            catch 
            {
                throw;
            }

            // Decrypts secret using the associated KMS CMK.
            // Depending on whether the secret is a string or binary, one of these fields will be populated.
            if (response.SecretString != null)
            {
                secret = response.SecretString;
            }
            else
            {
                memoryStream = response.SecretBinary;
                StreamReader reader = new StreamReader(memoryStream);
                secret = System.Text.Encoding.UTF8.GetString(Convert.FromBase64String(reader.ReadToEnd()));
            }

            return secret;
        }
    }
}

AJAX如何遍历每个文件夹的内容而不重复？

2 个答案: