如何在jquery中的每个onclick函数之后添加图像并增加图像答案

【问题标题】：How to add an image and increment the images on after each onclick function in jquery如何在jquery中的每个onclick函数之后添加图像并增加图像
【发布时间】：2020-06-22 20:36:39
【问题描述】：

我一直在尝试从项目中的图像文件夹中动态获取图像。使用点击功能，我需要在 div 中显示第一个图像，单击同一个按钮应该添加第二个按钮，依此类推，到达最后一个图像时，它应该从顶部开始并继续添加图像，直到重置为点击。我需要一个能持续显示图像总数的计数器。

我无法超越让图像显示。我已将它们添加到一个数组中以绕过各种名称的问题，因为重命名它们不是一种选择。目前，图像不显示，我得到了丢失图像的小图标和十二个图标，一次没有一个。

下面是jquery代码：

$(document).ready(function(){

$("#add_cat").click(function(){
    let images = [];
    images[0] = '<img src="../images/abyssinian-cat_small.jpg">';
    images[1] = '<img src="/images/birman-cat_small.jpg">';
    images[2] = '<img src="/images/british-shorhair_small.jpg">';
    images[3] = '<img src="/images/maine-coon_small.jpg">';
    images[4] = '<img src="/images/persian-cat_small.jpg">';
    images[5] = '<img src="/images/ragdoll-cat_small.jpg">';
    images[6] = '<img src="/images/russian-blue_small.jpg">';
    images[7] = '<img src="/images/savannah-cat_small.jpg">';
    images[8] = '<img src="/images/scottish-fold_small.jpg">';
    images[9] = '<img src="/images/siamese-cat_small.jpg">';
    images[10] = '<img src="/images/singapura-cat_small.jpg">';
    images[11] = '<img src="/images/sphynx-cat_small.jpg">';

    for (var i=1; i<=images.length; i++)
    {
        $("#cats").prepend('<img src="images/'+i+'.jpg">');
    }

})

})

【问题讨论】：

当您将鼠标悬停在丢失的图标上时，它应该会显示可能有助于调试的 URL
它显示了正确的路径，不知道为什么图像不会加载。我已经尝试更改我使用的报价类型，看看是否有帮助
尝试访问链接。如果您收到 404，请尝试清除缓存。如果您仍然收到 404，请尝试清除您的 DNS 缓存。

标签： javascript jquery ajax

【解决方案1】：

首先，您的代码不正确

for (var i=1; i<=images.length; i++)
{
    $("#cats").prepend('<img src="images/'+i+'.jpg">');
}

应该是

for (var i=1; i<=images.length; i++)
{
    $("#cats").prepend(images[i]);
}

其次，更好的方法是在 HTML 中添加所有图像（或 javascript，如果必须），然后将它们全部隐藏，一次显示一个。这样做的好处是你知道图像在那里，所以这只是一个正确的显示/隐藏逻辑的问题

【讨论】：

感谢您的回复，这有助于显示文件的正确路径，但图像仍然无法加载。