创建"Next"和"Previous"按钮以使用 index 在数组中导航？

Question

我正在尝试实现"Next"one_answers"Previous"按钮，以帮助我浏览数组中的项。

我正在使用数组中项目的索引来获取下一个或上一个项目。

示例：

arrA =  [{_id:1,name:"T-Rex"},{_id:3,name:"Predator X"},{_id:4 ,name:"Velociraptor"},{_id: 6, name:"Triceratops"}]

当前对象的id由表示

var selectedID = _id

下一个和上一个功能

next(){
var idx = arrA.map(x => x._id).indexOf(selectedID);
if (idx === arrA.length - 1){
//return first item
var next_name = arrA[0].name;
} else {
var next_name = arrA[idx + 1].name
}

previous(){
var idx = arrA.map(x => x._id).indexOf(selectedID);
if (idx === arrA[0]){
// return  last item
var prev_name = arrA[arrA.length -1].name;
} else{
var prev_name = arrA[idx -1].name
}
}

预期的结果是，当我单击其中一个按钮时，它会将我带到紧邻的下一个或上一个项目，但实际的结果是它不间断地在数组中循环。

Answer 1

当使用模(%(时，一切都变得简单多了。它可以让你在列表中前进(向前或向后(，而不用担心你是在开始还是结束。

const arr =  [{_id:1,name:"T-Rex"},{_id:3,name:"Predator X"},{_id:4 ,name:"Velociraptor"},{_id: 6, name:"Triceratops"}]
let currentIndex = 0;
let currentId = arr[0]._id;
// initial log
log();
function next(){
move();
}
function previous(){
move(false);
}
function move(advance = true){
currentIndex = (currentIndex + (advance ? 1 : -1) + arr.length) % arr.length;
currentId = arr[currentIndex]._id;
log();
}
function log(){
console.log("Index: " + currentIndex, "Id: " + currentId);
}

<button onclick="previous();">Previous</button>
<button onclick="next();">Next</button>