多电影场景下TMDB影片类型显示异常问题求助

单部电影展示时能正常显示全部类型，但加载多部电影时，只有第一部电影显示所有类型，其余电影的类型都不展示。dataMovie 是TMDB接口返回的 data.results 数据，相关代码如下：

function showMovies (dataMovie) {
    const main = document.getElementById('main');
    main.innerHTML = '';
    for (let i = 0; i < dataMovie.length; i++) {
        const newMovie = document.createElement('div');
        newMovie.innerHTML = 
        `<div class="movie-img">
             <img src="${url_poster + dataMovie[i].poster_path}" alt="${dataMovie[i].title}-poster">
        </div>
        <div class="movie-info">
            <h3>${dataMovie[i].title}</h3>
            <div class="genres">
            </div>
            <p>${dataMovie[i].release_date}</p>
        </div>
        <div class="movie-overview">
            <h3>Synopsis:</h3><br>
            <p>${dataMovie[i].overview}</p>
        </div>`

    main.appendChild(newMovie);

    for (let j = 0; j < genresList.length; j++) {
        dataMovie[i].genre_ids.forEach(id => {
            if (genresList[j].id === id) {
                let g = '';
                const div = document.querySelector('.genres');
                const p = document.createElement('p');
                g += genresList[j].name;
                p.innerHTML = `<p>- ${g} </p>`
                div.appendChild(p);
            }
        });
    }
}

问题核心是这行代码：const div = document.querySelector('.genres');
document.querySelector('.genres') 只会返回页面中第一个匹配.genres类的元素，所以循环到后续电影时，类型还是往第一个电影的容器里加，其他电影的类型容器根本没被用到。

修复后的代码： #

function showMovies(dataMovie) {
    const main = document.getElementById('main');
    main.innerHTML = '';
    // 先把类型列表转成ID到名称的映射，减少嵌套循环，提升效率
    const genreMap = new Map(genresList.map(genre => [genre.id, genre.name]));
    
    for (let i = 0; i < dataMovie.length; i++) {
        const newMovie = document.createElement('div');
        newMovie.innerHTML = 
        `<div class="movie-img">
             <img src="${url_poster + dataMovie[i].poster_path}" alt="${dataMovie[i].title}-poster">
        </div>
        <div class="movie-info">
            <h3>${dataMovie[i].title}</h3>
            <div class="genres">
            </div>
            <p>${dataMovie[i].release_date}</p>
        </div>
        <div class="movie-overview">
            <h3>Synopsis:</h3><br>
            <p>${dataMovie[i].overview}</p>
        </div>`;

        main.appendChild(newMovie);

        // 从当前电影卡片里获取对应的类型容器，而不是全局查找
        const genresContainer = newMovie.querySelector('.genres');
        // 遍历当前电影的类型ID，直接从映射里拿名称
        dataMovie[i].genre_ids.forEach(id => {
            const genreName = genreMap.get(id);
            if (genreName) {
                const p = document.createElement('p');
                p.textContent = `- ${genreName}`;
                genresContainer.appendChild(p);
            }
        });
    }
}

关键修改点： #

• 把genresList转换成Map结构，避免嵌套循环，性能更优
• 使用newMovie.querySelector('.genres')获取当前电影的类型容器，确保类型加到对应的卡片里
• 用textContent替代innerHTML设置文本，更安全，避免不必要的HTML解析

内容的提问来源于stack exchange，提问作者mikHe