Question

我有一个带有空数组的变量。

var imageData = [];
var myIndex = 0;

onClick我将一个元素添加到数组中。

["item_1", "item_2", "item_3", "item_4", "item_5"]

然后将此数组添加到具有背景图像的div中。

$('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)');

所以我刚刚添加了一个上一个/下一个按钮。我补充说： myIndex = myIndex +1;到下一个按钮，然后myIndex = myIndex -1;到prev按钮。然而，在经过这么多迭代之后，我什么都没回来，因为myIndex是undefined，任何人都知道我做错了什么？

我已经看过几次这个问题，但不确定我错过了什么。谢谢！

编辑：对不起！这里有更完整的代码视图。

我的数组：["item_1", "item_2", "item_3", "item_4", "item_5"]

我的下一个onClick：

   $('.btn-right').on('click', function(){
      myIndex = myIndex + 1;
     $('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)');
    });

我的上一页onClick：

   $('.btn-left').on('click', function(){
      myIndex = myIndex - 1;
     $('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)');
    });

Answer 1

每次点击都会增加myIndex。它将很快超过imageData的结尾（例如，在您的示例中myIndex为4时，递增到5将超过数组的结尾）。

检查一下，然后返回到开头：

$('.btn-right').on('click', function(){
  myIndex++;
  if (myIndex >= imageData.length)
    myIndex = 0;   

  $('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)');
});

或者只是留在列表的末尾：

$('.btn-right').on('click', function(){
  myIndex++;
  if (myIndex >= imageData.length)
    myIndex = imageData.length - 1;   

  $('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)');
});

“左”的逻辑是相似的 - 或者：

if (myIndex < 0)
  myIndex = imageData.length - 1;

或

if (myIndex < 0)
  myIndex = 0;

Answer 2

始终将索引保持在数组边界内的一个干净的解决方案是以它的大小为模。像这样：

case

这会导致myIndex = (myIndex + 1) % imageData.length;一旦达到myIndex就会反弹回来。

同一方法的另一种方法是：

imageData.length

数组中的上一个/下一个项目

2 个答案: