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

Question

希望能够点击图像并使用与点击的海报匹配的 imdbID 显示来自第二次 fetch 调用的数据。

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

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

这里的代码沙盒：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标签后，你可以再次映射数据，这次为每个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
})

您需要以某种方式区分图像。您还可以创建一个图像数组并在其上映射。