Question

我目前正在尝试构建个人档案查看器之类的应用。我有一个对象数组，每个对象都包含一些信息，这些信息需要在单击页面上的“下一步”按钮后逐一显示在页面上。这是供参考的代码：

 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中保存着更多的smallArr类型的数组。

这是我拼凑起来的代码，以使其正常工作：

 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();   
 }

希望所有这些都至少有意义。预先非常感谢。

Answer 1

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

Current == bigArray[Arr][Current].length => Current == bigArray[Arr].length

Prev()

逻辑：我们还需要在单击Prev时减少Counter。

我认为您不需要这种复杂的逻辑，我们可以将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>

如何遍历对象数组并在页面上显示每个对象？（香草JS）

1 个答案:

如何遍历对象数组并在页面上显示每个对象？ （香草JS）

1 个答案:

如何遍历对象数组并在页面上显示每个对象？（香草JS）