如何将获取数据与从不同的提取调用的图像相匹配？

Question

希望能够使用与点击的海报匹配的imdbID单击图像并显示第二次获取调用中的数据。

我正在尝试将电影海报打印到页面 - 然后电影海报可以点击 - 点击它们将在div（“信息”）中显示导演，演员和年份信息。

我无法弄清楚如何使所有图像对点击事件做出反应。 （我认为这是因为img id，但如果按类获取图像，我就无法使代码工作）。我可以从第二次获取中获取数据，但它仅适用于第一张海报和最后一张图像中的数据。 （第一张海报也是唯一可点击的海报。

CodeSandbox：https://codesandbox.io/s/1ojvormxn7

我可以控制第二次调用记录数据，但它与图像不匹配，我不知道如何在需要的地方打印它。

 document.getElementById("searchButton").addEventListener("click", () => {
  const inputSearch = document.getElementById("searchInput").value;
  //console.log(inputSearch);
  fetch(`https://www.omdbapi.com/?apikey=d2d93339&s=${inputSearch}`)
    .then(response => response.json())
    .then(data => {
      console.log(data);
      let posterImage = "";
      let imdb = "";
      data.Search.map(results => {
        //console.log(results.Poster);
        return (
          (posterImage += `<img id="resultPic" class="resultPic" src="${
            results.Poster
          }">`) && (imdb = results.imdbID)
        );
      });
      document.getElementById("app").innerHTML = posterImage;
      document
        .getElementById("resultPic")
        .addEventListener("click", getInfo => {
          fetch(`https://www.omdbapi.com/?apikey=d2d93339&i=${imdb}`)
            .then(response => response.json())
            .then(data => {
              console.log(data);

            });
        });
    });
});

Answer 1

你需要做的是为每个img标签使用uniq id，为此，你可以像这样使用imdbID：

<img id=resultPic-${results.imdbID}

这样你总是有一个uniq id，然后在渲染img标签之后，你可以再次映射数据，这次将click事件添加到每个img标签，你不需要真正再次调用api，你可以像这样做 ：

data.Search.map(results => {
    document
      .getElementById(`resultPic-${results.imdbID}`)
      .addEventListener("click", getInfo => {
        console.log(results);
      });
  });

我在这里更新您的代码，正如您在控制台日志中看到的那样，一旦您点击每张海报，您将获得该海报的数据，您可以在任何地方使用它：

https://codesandbox.io/s/p981v90nx

Answer 2

我看到的一些问题：

1. 您为每个图像分配了相同的ID，因此您的getElementById调用永远不会像您希望的那样工作。
2. 不确定data.Search.map应该返回什么。
3. 考虑事件委托。您可以将侦听器添加到父元素，并根据事件目标执行某些操作。像这样的东西：

<div id="container">
[images are appended to this container]
</div>

var container = document.getElementById("container");
container.addEventListener("click", (e) => {
    // e.target will return the object the user clicked (e.g. the image)
    // you could perform a fetch based on some attribute you assigned to the image perhaps
})

无论如何，你需要以某种方式区分图像。您还可以创建一个图像数组并映射到该数组。