我是 JavaScript 的初學者，我無法弄清楚以下問題：我正在嘗試創建一個簡單的 JavaScript 電影串列。我在電影串列中有 10 個串列。我試圖用 for 回圈顯示所有串列，但它不起作用。這是代碼：
function renderModal() {
for (let i = 0; i < listMovies.length; i ) {
let movieData = listMovies[i];
document.getElementById("poster").src = movieData.img;
document.getElementById("title").innerHTML = movieData.name;
document.getElementById("genre").innerHTML = movieData.genre;
document.getElementById("rating-num").innerHTML = "Rating: " movieData.rating "/10";
document.getElementById("movie-desc").innerHTML = movieData.desc;
document.getElementById("imdb-page").href = movieData.link;
return movieData;
}
}
我需要做什么？幫我修一下！。
uj5u.com熱心網友回復：
你return movieData;會阻止死回圈。并不是說多次運行它會改變任何東西，因為您一遍又一遍地更改相同的元素。ID 必須是唯一的。
這是渲染陣列的有用方法
document.getElementById("container").innerHTML = listMovies.map(movieData => `<img src="${movieData.img}" />
<h3>${movieData.name}</h3>
<p>${movieData.genre}</p>
<p>Rating: ${movieData.rating}/10</p>
<p>${movieData.desc}
<a href="${movieData.link}">IMDB</a>
</p>`).join("<hr/>");
uj5u.com熱心網友回復：
回傳movieData，for回圈會提前結束。你應該把它放在for回圈之外。
uj5u.com熱心網友回復：
您可以將模板標簽用于串列并將其渲染到目標元素中。我正在展示一個示例。
電影串列
<div id="movieList"></div>
串列模板
<template id="movieListTemplate">
<div class="movie">
<img src="" class="poster" alt="">
<div class="title"></div>
<div class="genre"></div>
<div class="rating-num"></div>
<div class="movie-desc"></div>
<div class="imdb-page"></div>
</div>
</template>
Javascript代碼：
if (listMovies.length > 0) {
const movileListTemplate = document.getElementById('movieListTemplate')
const movieRenederElement = document.getElementById('movieList')
for(const movie of listMovies) {
const movieEl = document.importNode(movileListTemplate.content, true)
movieEl.querySelector('.poster').src = movie.img
movieEl.querySelector('.title').textContent = movie.name
//use all queryselector like above
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339674.html
標籤：javascript 数组 网络
下一篇：如何在片段串列中找到特定片段？