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

Question

我一直在尝试从项目中的图像文件夹中动态获取图像。使用单击功能，我需要在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">');
}
})

}(

Answer 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，如果必须(中添加所有图像，然后将它们全部隐藏，一次显示一个。这样做的好处是你知道图像在那里，所以这只是一个让显示/隐藏逻辑正确的问题。