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

Prev/Next item in Array

本文关键字：下一个 项目 上一个 数组      更新时间：2023-09-26

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

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;到"上一个"按钮。然而，经过这么多次迭代，我什么也没得到，因为在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)');
    });

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

myIndex = (myIndex + 1) % imageData.length;

这将导致myIndex在达到imageData.length后反弹回 0

。

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

myIndex++;
myIndex %= imageData.length;

您每次点击都会增加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;
相关文章：