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
}