如何在JavaScript中使用For循环来显示列表?

Question

我是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;
}
}

我该怎么做?帮我修一下!

Answer 1

可以使用模板标记，并将其呈现到目标元素中。我正在展示一个例子。

电影列表

<div id="movieList"></div>

list模板

<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
}
}

Answer 2

您的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/>");

Answer 3

使用return movieData, for循环将提前结束。你应该把它放在for循环之外。