Question

我有两个问题。

我有一个jQuery数组，用于存储图像的URL。几分钟前一切都很好，但现在不行。我有以下代码的图像：

var images = [“link1”，“link2”，“etc”，“etc”]; 索引= 0;

这会在您点击缩略图时显示它们：

$('.thumbnail').click(function(){
$('.large_view').prepend('<img src="'+images[index]+'" width="450px"/>');
});

这将显示数组中的上一个/下一个图像：

$('.next').click(function(){
         index = (index===0)?(images.length-1):(index-1);
          $('.large_view img').attr('src',images[index]);
         });

$('.previous').click(function(){
           index = (index==images.length-1)?0:(index+1);
           $('.large_view img').attr('src',images[index]);
           });

我的问题是，当我点击缩略图时，相同的图像（数组中的第一个图像）总是显示出来。之后，我可以使用下一个/上一个按钮正确更改图像。

当我使用包含以下内容的代码在我的数组中显示图像时，它会向后显示，从数组中的最后一项到第一项：for(var i=0; i<images.length; i++)

P.S。 .previous和.next内的代码倒退的唯一原因是因为数组在某种程度上是向后的，就像我说的那样。

Answer 1

第一个问题是，当点击任何缩略图时，index将处于其原始值0，这是第一个显示的第一个。要解决此问题，您需要根据点击的缩略图确定相应的索引（如果您将索引填充到类似的属性中，可能使用$(this).attr('data-image-index')。）

第二个问题是，您希望在.append循环中使用.prepend代替for将每个新缩略图添加到该集的 end 而不是开头。

此外，.next和.previous的点击处理程序似乎是向后的。

如果您只想在任何给定时间显示一张大图片，则可能需要使用$('.large_view').html(...)代替$('.large_view').prepend(...)。

Answer 2

1）您的索引为0，因此您每次都会获得第一张图像。这一行

$('.large_view').prepend('<img src="'+images[index]+'" width="450px"/>');

应该更改

，以引用所点击的缩略图的索引而不是名为index的变量。像

这样的东西

$('.large_view').prepend('<img src="'+ $(this).attr("index") +'" width="450px"/>');

创建缩略图时，您将添加索引attr，例如：

for( var i=0; i<images.length; i++){
  var thumbnails = '<label class="align">' + '<img class="thumbnail" src="'+images[i]+'" index="' + i + '"/></label>';

  $('.gallery').prepend(thumbnails);

}

2）对于你的第二个问题，你正在使用prepend，顾名思义就是prepends。你会想要使用append（）来按正义顺序获取它们。

继续从jQuery数组获得相同的值

2 个答案: