Question

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

理想情况下，我想单击一个按钮（＆＃34;下一组＆＃34;在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);

将现有的click()替换为此（包括lastIndex的声明）以进行尝试：

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()。

Answer 2

我认为你的问题很简单。你做了一个切片，总是回到同一个数组

var array = [0,1,2,3,4,5];
let newArray1 = array.slice(0,2); // returns a new array
let newArray2 = array.slice(0,2); // returns the same new array

for(var i = 0; i < 2; i = i+2) {
  result = array.slice(i, i+2);
  console.log(result);
}

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

2 个答案: