如何浏览对象数组并在页面上显示每个对象?(香草JS)

我目前正在尝试构建一个配置文件查看器类型的应用程序。我有一个对象数组，每个对象都包含一些信息，在单击页面上的"下一步"按钮后，需要逐个显示在页面上。以下是供参考的代码：

const bigArray = [
smallerArr = [
{
name: "Name",
info: "Information",
img: "/Images/image.jpg"
},
{
name: "Name",
info: "Information",
img: "/Images/image.jpg"
},
{
name: "Name",
info: "Information",
img: "/Images/image.jpg"
}
],
smallerArr1 = [
{
name: "Name",
info: "Information",
img: "/Images/image.jpg"
},
{
name: "Name",
info: "Information",
img: "/Images/image.jpg"
},
{
name: "Name",
info: "Information",
img: "/Images/image.jpg"
}
] // Many more below
]

在 bigArray 中保存着更多较小的 Arr 类型数组。

这是我拼凑的代码，试图让它工作：

let Current = 0;
let Arr = 0;
let Counter = 0; // Multiple counters to keep track of where we're at in the array
next.style.display = "inline-block"; // Display 'Next' button
restart.style.display = 'none'; // Hide 'Restart' button
previous.addEventListener("click", Prev); // Added event to go to previous profile
next.addEventListener("click", Next); // As above, but for next profile
restart.addEventListener("click", Restart);

function Prev() {
if(Current == 0){
window.location.reload(); // If at first profile, reload page
} else {
Current--;
}
name.innerHTML = `<h4>${bigArray[Arr][Current].name}</h4>`
text.innerHTML = `<p>${bigArray[Arr][Current].info}</p>`
img.innerHTML = `<img src="${bigArray[Arr][Current].img}">`
}
function Next() {
previous.style.display = 'inline-block';
Current++;
Counter++;
if(Counter > 0) {
next.innerHTML = 'NEXT';
}
if(Current == bigArray[Arr][Current].length) {
Arr++; // Go to next "smallerArr"
Current = 0; // Reset Current to start from first element within next "smallerArr"
}
if(Counter == bigArray[Arr][Current].length){
next.style.display = 'none';
previous.style.display = 'none';
restart.style.display = 'inline-block'; // going through elements has finished
}
name.innerHTML = `<h4>${bigArray[Arr][Current].name}</h4>`;
text.innerHTML = `<p>${bigArray[Arr][Current].info}</p>`
img.innerHTML = `<img src="${bigArray[Arr][Current].img}">`
getQuote();   
}

希望所有这些至少都有点意义。提前非常感谢。

代码中有一些小错误。每个都应该纠正。我只是将它们列出如下：

Current == bigArray[Arr][Current].length=>Current == bigArray[Arr].length
Prev()中的逻辑：我们还需要在单击"Prev"时减少计数器。

我认为你不需要有这个复杂的逻辑，我们可以将 2D 数组转换为 1D 数组，然后整个逻辑应该变得简单。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="name">name</p>
<p id="text">name</p>
<p id="img">name</p>
<button type="button" id='previous'>previous</button>
<button type="button" id='next'>next</button>
<script>
const bigArray = [
smallerArr = [
{
name: "Name1",
info: "Information",
img: "/Images/image.jpg"
},
{
name: "Name2",
info: "Information",
img: "/Images/image.jpg"
},
{
name: "Name3",
info: "Information",
img: "/Images/image.jpg"
}
],
smallerArr1 = [
{
name: "Name4",
info: "Information",
img: "/Images/image.jpg"
},
{
name: "Name5",
info: "Information",
img: "/Images/image.jpg"
},
{
name: "Name6",
info: "Information",
img: "/Images/image.jpg"
}
] // Many more below
]
let Current = 0;
let Arr = 0;
let Counter = 0; // Multiple counters to keep track of where we're at in the array
next.style.display = "inline-block"; // Display 'Next' button
//restart.style.display = 'none'; // Hide 'Restart' button
previous.addEventListener("click", Prev); // Added event to go to previous profile
next.addEventListener("click", Next); // As above, but for next profile
//restart.addEventListener("click", Restart);
let name = document.getElementById("name");
let text = document.getElementById('text')
function Prev() {
if(Current == 0 & Counter ==0){
window.location.reload(); // If at first profile, reload page
} else {
Current--;
}
Counter--;
if(Current == -1){
Arr--; // Go to next "smallerArr"
Current = bigArray[Arr].length-1; // Reset Current to start from first element within next "smallerArr"
}
name.innerHTML = `<h4>${bigArray[Arr][Current].name}</h4>`;
text.innerHTML = `<p>${bigArray[Arr][Current].info}</p>`;
//img.innerHTML = `<img src="${bigArray[Arr][Current].img}">`
}
function Next() {
previous.style.display = 'inline-block';
Current++;
Counter++;
if(Counter > 0) {
next.innerHTML = 'NEXT';
}
if(Current == bigArray[Arr].length) {
Arr++; // Go to next "smallerArr"
Current = 0; // Reset Current to start from first element within next "smallerArr"
}
if(Counter == bigArray.flat().length){
next.style.display = 'none';
previous.style.display = 'none';
//restart.style.display = 'inline-block'; // going through elements has finished
}
name.innerHTML = `<h4>${bigArray[Arr][Current].name}</h4>`;
text.innerHTML = `<p>${bigArray[Arr][Current].info}</p>`;
console.log(name.innerHTML);
//img.innerHTML = `<img src="${bigArray[Arr][Current].img}">`;
//getQuote();   
}
</script>
</body>
</html>

相关内容

最新更新

热门标签：