我正在尋找在我的疊加層中顯示正確電影資訊的解決方案。我有一個“彈出視窗”，當我點擊一部電影時，它應該顯示電影的資訊，但是當我點擊一部電影時，無論是哪一部電影，它都只顯示最后一部電影的資訊，應該是什么我要修嗎？
const movieIntegration =() => {
allMovies.map(movie=> {
movieGallery.innerHTML = `<div >
<img src="${movie.img}" alt="如何在疊加層中顯示正確的電影資訊？">
<div >
<div > ${movie.name} </div>
<div > See more </div>
</div>
</div>`
const seemore = document.querySelectorAll(".seemore")
seemore.forEach(elm => {
elm.addEventListener("click",() => {
pageContainer.innerHTML = `<div >
<div >
${movie.name}
<div id="likeButton">
<img src="img/like.png">
</div>
<div id="editButton">
<img src="img/edit.png">
</div>
<a href="submit.html">
<div id="addingButton">
<img src="img/add.png">
</div>
</a>
</div>
</div>`
console.log(true)
}, true)
})
})
}
uj5u.com熱心網友回復：
問題是您正在獲取.seemore每部電影的所有元素，并且正在編輯每部電影的所有元素的內容，因此最后一部電影將覆寫之前所有電影的內容。
解決方案可能是這樣的：
const movieIntegration = () => {
allMovies.map((movie) => {
movieGallery.innerHTML = `<div >
<img src="${movie.img}" alt="如何在疊加層中顯示正確的電影資訊？">
<div >
<div > ${movie.name} </div>
<div > See more </div>
</div>
</div>`
})
const seemore = document.querySelectorAll('.seemore')
seemore.forEach((elm, i) => {
elm.addEventListener(
'click',
() => {
pageContainer.innerHTML = `<div >
<div >
${allMovies[i].name}
<div id="likeButton">
<img src="img/like.png">
</div>
<div id="editButton">
<img src="img/edit.png">
</div>
<a href="submit.html">
<div id="addingButton">
<img src="img/add.png">
</div>
</a>
</div>
</div>`
},
true
)
})
}
通過這種方式，您可以在.seemore完成映射后映射元素，allMovies并且對于每個.seemore元素，您都會獲得相關的電影并在里面寫下他的名字。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/373315.html
標籤：javascript 弹出