不断从 jQuery 数组中获取相同的值答案

【问题标题】：Keep getting same value from jQuery array不断从 jQuery 数组中获取相同的值
【发布时间】：2014-12-14 08:31:00
【问题描述】：

我有两个问题。

我有一个存储图像 URL 的 jQuery 数组。几分钟前一切正常，但现在不行了。我有以下图片代码：

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++)

附： .previous 和 .next 中的代码向后的唯一原因是因为数组在某种程度上是向后的，就像我说的那样。

【问题讨论】：

标签： javascript jquery arrays image src

【解决方案1】：

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

第二个问题是您想在for 循环中使用.append 而不是.prepend 将每个新缩略图附加到集合的end 而不是开始。

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

如果您只想在任何给定时间显示一张大图片，您可能希望使用$('.large_view').html(...) 而不是$('.large_view').prepend(...)。

【讨论】：

【解决方案2】：

1) 你的索引是 0，所以你每次都会得到第一张图片。这一行

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

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

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

创建缩略图时会添加索引属性，例如：

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() 将它们按您想要的顺序排列。

【讨论】：