Question

我希望标题不会被错误放置或误导。为了减少不必要的代码重复，我想做的事情是这样的：

const predefinedOutput = "for(let i = 0; i < movie.length; i++) {
    output += `<div class="card">
    <div class="overlay">
    <div class="movie">
        <h2>${movie[i].title}</h2>
            <p><strong>Rating:</strong> ${movie[i].vote_average}</p>
            <p><strong>Release date:</strong> ${movie[i].release_date}</p>
            <a onclick="movieSelected('${movie[i].id}')" href="#">Details</a>
     </div>
    </div>
    <div class="card_img">
        <img src="http://image.tmdb.org/t/p/w300/${movie[i].poster_path}" onerror="this.onerror=null;this.src='../images/imageNotFound.png';">
    </div>
    </div>`;
};

如果完全可行的话，我该如何预先定义一个包含forloop的输出，然后将其用于API调用中，因此我不会重复上面的代码进行不同的搜索（页面更改，类型更改等）？预先感谢。

Answer 1

尝试以下示例。不知道要拍什么电影。在此示例中，它应该是一个数组。您也可以使用.map()，但是movies应该是一个对象。 map和forEach的作用与for循环相同

<script>
movies.forEach( movie => {
    output += `<div class="card">
                    <div class="overlay">
                        <div class="movie">
                            <h2>${movie.title}</h2>
                                <p><strong>Rating:</strong> ${movie.vote_average}</p>
                                <p><strong>Release date:</strong> ${movie.release_date}</p>
                                <a onclick="movieSelected('${movie.id}')" href="#">Details</a>
                        </div>
                    </div>
                    <div class="card_img">
                        <img src="http://image.tmdb.org/t/p/w300/${movie.poster_path}" onerror="this.onerror=null;this.src='../images/imageNotFound.png';">
                    </div>
                </div>`;
});

在变量内定义动态输出？

1 个答案: