for 循环只显示数组对象中的一项和最后一项

Question

我有一个循环遍历这个数组对象的 for 循环。但是，有一些事情我不确定并且不明白。第一个问题是为什么循环只显示数组中的一项而不是全部？另一个问题是它只显示数组中的最后一项？我以为它会显示第一项，但事实并非如此。感谢您对这些问题的任何解释，谢谢！

Javascript：

const rosterItems = [
  {
    img: '<img src="images/bryce.jpg" class="artist-image" alt="#">',
    resident: '<p>Resident: Bryce Methven</p>',
    bio: '<p>' +
         'Lorem ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         'Lorem ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         '</p>'
  },
  {
    img: '<img src="images/haptic.jpg" class="artist-image" alt="#">',
    resident: '<p>Resident: Haptic</p>',
    bio: '<p>' +
         'Haptic ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         '</p>'
  },
  {
    img: '<img src="images/haptic.jpg" class="artist-image" alt="#">',
    resident: '<p>Resident: DJ Test</p>',
    bio: '<p>' +
         'Haptic ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         '</p>'
  }
]

const rosterArtist = document.querySelector(".artist")
const rosterBio = document.querySelector(".bio")

for (let i = 0; i < rosterItems.length; i++) {

  let leftCol = `<div class="item">
                  ${rosterItems[i].img}
                  ${rosterItems[i].resident}
                  </div>`

  let rightCol = rosterItems[i].bio
    
  rosterArtist.innerHTML = leftCol
  rosterBio.innerHTML = rightCol

}

HTML：

<div class="roster-gallery">
    <div class="artist">
    </div>
    <div class="artist-bio">
         <div class="bio">
         </div>
         <div class="pagination">
              <button class="previous">Previous</button>
              <button class="next">Next</button>
         </div>
     </div>
</div>

Answer 1

您的 Html 应该是（您错过了事件并且 for 循环对您不起作用）

<div class="roster-gallery">
<div class="artist">
</div>
<div class="artist-bio">
     <div class="bio">
     </div>
     <div class="pagination">
          <button class="previous" onclick="previous()">Previous</button>
          <button class="next"  onclick="next()">Next</button>
     </div>
 </div>

你的javascript应该是

    const rosterItems = [
  {
    img: '<img src="images/bryce.jpg" class="artist-image" alt="#">',
    resident: '<p>Resident: Bryce Methven</p>',
    bio: '<p>' +
         'Lorem ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         'Lorem ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         '</p>'
  },
  {
    img: '<img src="images/haptic.jpg" class="artist-image" alt="#">',
    resident: '<p>Resident: Haptic</p>',
    bio: '<p>' +
         'Haptic ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         '</p>'
  },
  {
    img: '<img src="images/haptic.jpg" class="artist-image" alt="#">',
    resident: '<p>Resident: DJ Test</p>',
    bio: '<p>' +
         'Haptic ipsum dolor sit amet consectetur adipisicing elit. ' +
         'Culpa ex expedita doloremque, sunt eveniet, laboriosam totam at, debitis earum fugit eligendi quae. ' +
         'Perferendis ratione cum ipsum molestiae perspiciatis tempore aut?' +
         '</p>'
  }
]

const rosterArtist = document.querySelector(".artist")
const rosterBio = document.querySelector(".bio")

const maxPos = rosterItems.length;
let currentPos = 0; 

function previous(){
    if(currentPos>0){
    currentPos-=1;
  }
  showData();
}
function next(){
    if(currentPos<maxPos){
    currentPos+=1;
  }
  showData();
}
showData();
function showData(){
let leftCol = `<div class="item">
                  ${rosterItems[currentPos].img}
                  ${rosterItems[currentPos].resident}
                  </div>`

  let rightCol = rosterItems[currentPos].bio
    
  rosterArtist.innerHTML = leftCol
  rosterBio.innerHTML = rightCol
}