javascript - 如何在 Javascript/jQuery 中动态切片数组？

Question

我有一个照片库，其中包含将不断上传的图像。 PHP 数组已转换/编码为 JSON 数组，以便我可以使用 JavaScript 操作数据。

理想情况下，我想单击一个按钮(在 CodePen 示例中为“下一组”)并加载下一组(共 2 个)缩略图。这是为了不一次加载所有图像，这可能是数百个。

问题:我不知道如何在点击时动态切片数组(接下来的 5 张图片)。我当然可以一次加载 2 个:

myArray.slice(0,2);
myArray.slice(3,5);

但是，这将不起作用，因为图像将不断添加到图库中。此外，我必须有太多的上述内容才能一次切出 5 个。

我试过:

• 将数组拆分成更小的数组
• for 循环和$.each 循环

我基本上需要能够在单击时将切片的开始和结束索引移动(例如)2。现在它只是不断地对相同的两个图像进行切片，因为切片不是动态的。

这是我的 CodePen

Answer 1

我不认为有一种方法可以完全按照您的意愿行事，但您可以跟踪您在数组中的位置并从那里开始切片，如下所示:

var nextSet = myArray.slice(lastIndex, lastIndex + 2);

用这个(包括 lastIndex 的声明)替换你现有的 click() 试试看:

var lastIndex = 0
$('.button').click(function() {
  var nextSet = myArray.slice(lastIndex, lastIndex + 2);
  lastIndex += 2;
  for (var i = 0; i < 2; i++) {
    var li = $('<li/>').attr('role', 'menuitem').appendTo('.myList').append('<img src=' + nextSet[i] + '>');
  }
});

请注意，我已将 slice() 行移到 for 循环之外。无需为每次迭代都切片一个新数组。

这是一个 CodePen using .slice() .

另一种方法是使用 shift() 在每次迭代中剥离数组中的第一项:

var nextItem = myArray.shift()

虽然这是破坏性的(它从原始数组中删除项目)，因此如果您想将其用于其他任何事情，您需要先制作原始数组的副本。将您的 click() 替换为:

$('.button').click(function() {
  for (var i = 0; i < 2; i++) {
    var nextItem = myArray.shift();
    var li = $('<li/>').attr('role', 'menuitem').appendTo('.myList').append('<img src=' + nextItem + '>');
  }
});

这是一个 CodePen using .shift() .