从数组中获取所有 ID 的参数

Question

我正在为学校制作一个 moviefilter 网站。现在最后一部分是我需要 link 数组中的 imdbID 到屏幕上的电影海报。我制作了 links，过滤器机制有效，但是当我单击海报时，该过滤器的所有 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);

从数组中获取所有 ID 的参数

Argument grabbing all ID's from Array

javascript

arguments

function