[英]Javascript Array splice method show 50 items at a time with forward backword button
Hi all I have an array that I would like to scroll through with buttons previous and next. 大家好,我有一个数组,我想使用上一个和下一个按钮滚动浏览。 How can I use the array splice method to do this and keep track of the array index?
如何使用数组拼接方法执行此操作并跟踪数组索引? I am always displaying in groups of 50
我总是以50人为一组展示
//Previous page button calls this function
var previousPage = function(){
pageCount = pageCount -50;
arraySlice = peopleArray.slice(pageCount -50, pageCount);
for(i = 0; i<arraySlice.length;i++){
var key = arraySlice[i];
createCircles(key.gplusUrl, key.gplusImg, divId, key.displayName, divId);
}
};
//Next page button calls next page function
var nextPage = function(){
//I am using pageCount for the index pageCount
//I increment the pageCount by 50
pageCount = pageCount +50;
//Splice the
arraySlice = peopleArray.slice(pageCount, pageCount +50);
//Loop through the array I sliced
for(i = 0; i<arraySlice.length;i++){
key = arraySlice[i];
//This function displays the items from the array you can ignore this
createCircles(key.gplusUrl, key.gplusImg, divId, key.displayName, divId);
}
};
Lets say your current pageCount is at 200 in your giant array: 假设您当前的pageCount在巨型数组中为200:
<-----100-----150----- 200 -----250-----300-----> <----- 100 ----- 150 ----- 200 ----- 250 ----- 300 ----->
What happens when you call nextPage()
? 调用
nextPage()
会发生什么? You increment pageCount to 250, and then slice from (pageCount, pageCount+50) which is (250-300). 您将pageCount增加到250,然后从(pageCount,pageCount + 50)切成(250-300)。 So now you end up displaying this portion of your array:
因此,现在您最终显示了阵列的这一部分:
<-----100-----150-----200----- 250-----300 -----> <----- 100 ----- 150 ----- 200 ----- 250 ----- 300 ----->
Next, lets say you called previousPage()
. 接下来,假设您调用了
previousPage()
。 You decrement pageCount to 200 and then slice from (pageCount-50, pageCount) which is (150-200). 您将pageCount递减到200,然后从(pageCount-50,pageCount)切成(150-200)。 So you end up displaying this portion:
因此,您最终将显示以下部分:
<-----100----- 150-----200 -----250-----300-----> <----- 100 ----- 150 ----- 200 ----- 250 ----- 300 ----->
Calling nextPage()
will display (250-300) again. 调用
nextPage()
将再次显示(250-300)。 Notice how its impossible to display (200-250)? 注意它不可能显示(200-250)?
The reason is because in your previousPage implementation, you decremented pageCount by 50, and then choose to select the 50 items before it. 原因是因为在您的PreviousPage实现中,您将pageCount递减了50,然后选择选择它之前的50个项目。 Essentually, you've moved your selection down by 100 when you only meant to go back by 50. Change your previousPage implementation to also slice from (pageCount, pageCount+50).
从本质上讲,当您只想返回50时,您已将选择项下移了100。将您以前的Page实现更改为也从(pageCount,pageCount + 50)中进行切片。
Also, make sure you check after you decrement pageCount that it's not negative because that will end up selecting from the end of the array. 另外,请确保在递减pageCount之后检查它是否为负数,因为最终会从数组末尾进行选择。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.