4

希望能够单击图像并使用与单击的海报匹配的 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);

            });
        });
    });
});
4

2 回答 2

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

于 2019-05-01T18:43:48.130 回答
1

我看到的几个问题：

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

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

于 2019-05-01T18:45:03.247 回答