Question

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

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

我不知道如何使所有图像对click事件作出反应。（我认为这是因为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标签使用唯一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

我看到一些问题：

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

<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
})

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

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

2 个答案: