参数从 Array 中获取所有 ID

Question

我正在为学校制作一个电影过滤器网站。现在最后一部分是我需要将数组中的 imdbID 链接到屏幕上的电影海报。我创建了链接，过滤器机制起作用，但是当我点击一张海报时，该过滤器的所有 ID 都被添加到末尾。不止一个。

我的老师说我可以通过 movieArray 数组 forEach 并在该循环中写入我需要的所有内容。有人可以帮助我或查看我的代码我做错了什么。我现在编写了 2 个单独的函数来创建所需的参数。

我的代码：

const addMoviesToDom = function (movieArray) {
    const movieList = document.querySelector("#movielist");
    movieList.innerHTML = "";

    const moviePoster = movieArray.map(item => {
        return item.Poster;
    });
    const imdbId = movieArray.map(item => {
        return item.imdbID;
    })

    moviePoster.forEach(element => {
        let newLi = document.createElement("li");
        let newLink = document.createElement("a");
        let images = document.createElement("img");
        images.src = element;
        newLink.setAttribute("href", "https://www.imdb.com/title/" + imdbId);
        newLink.setAttribute("target", "_blank");
        newLi.append(newLink);
        newLink.append(images);
        movieList.appendChild(newLi);
    })
};
addMoviesToDom(movies);

提前致谢，希望你们能理解我要解释的内容，这对我来说都是全新的。

Answer 1

imdbId 是所有 ID 的数组。当您将其连接到 "https://www.imdb.com/title/" 时，它会变成一个字符串，它将所有 ID 与 , 分隔符连接起来。因此，您不会将 href 设置为仅对应于当前 moviePoster 元素的 ID。

您需要对数组进行索引以获得正确的 ID。 forEach 提供数组索引作为回调函数的第二个参数，因此您可以将element => 更改为(element, i) =>，然后使用imdbId[i]。

但更简单的方法是跳过创建 moviePoster 和 imdbId 数组，而只创建 movieArray 中的所有元素。

const addMoviesToDom = function(movieArray) {
  const movieList = document.querySelector("#movielist");
  movieList.innerHTML = "";

  movieArray.forEach(element => {
    let newLi = document.createElement("li");
    let newLink = document.createElement("a");
    let images = document.createElement("img");
    images.src = element.Poster;
    newLink.setAttribute("href", "https://www.imdb.com/title/" + element.imdbId);
    newLink.setAttribute("target", "_blank");
    newLi.append(newLink);
    newLink.append(images);
    movieList.appendChild(newLi);
  })
};
addMoviesToDom(movies);