单击弹出窗口显示错误数据答案

【问题标题】：On click popup shows wrong data单击弹出窗口显示错误数据
【发布时间】：2017-03-17 22:29:38
【问题描述】：

我正在制作一个供我自己使用的电影院时间表页面，但我遇到了一个问题。我想让页面弹出我点击的电影的信息，但它总是显示列表中最后一部电影的信息。

我确定这很简单，但我就是没看到。

我用来获取所需信息的代码：

    var settings = {
  "async": true,
  "crossDomain": true,
  "url": ("https://api.themoviedb.org/3/search/movie?api_key=e8a6a870421f5cc13e775873bfe1cad8&language=bg&query=")+encodeURIComponent(fn),
  "method": "GET",  
  "headers": {},
  "data": "{}"
}
$.ajax(settings).done(function (response) {
    var plakat = response.results[0].poster_path;
  window.movieId = response.results[0].id;
  window.title = response.results[0].title;
  window.poster = "https://image.tmdb.org/t/p/w92/"+plakat;
  window.overview = response.results[0].overview;
  console.log(response.results[0].title);
  var k;
  for(k=0; k< ttest.length; k++){
  document.getElementById('myPopup').innerHTML = ("<img align='left' src="+window.poster+"><h2>"+window.title+"</h2><br>"+window.overview);
  }
});

然后我想循环所有结果，以便我可以更改弹出窗口中显示的数据，但它似乎不起作用。

任何帮助将不胜感激。

【问题讨论】：

你能制作这个的最小版本吗？这么简单的问题要费很多功夫
似乎您为列表中的每个条目发送了一个 ajax 请求，当他们响应时，您会覆盖弹出窗口的内容。因此，您的弹出窗口包含最后解析的 ajax 请求的结果。而所有其他请求都只是浪费时间和带宽。
希望这个更好看。
任何我如何解决它的建议将不胜感激

标签： javascript html themoviedb-api

【解决方案1】：

这将显示每部电影的缩略图。当您单击缩略图时，将显示标题和说明（如果有）：

var fn = "snow white";
var settings = {
"async": true,
"crossDomain": true,
"url": ("https://api.themoviedb.org/3/search/movie?api_key=e8a6a870421f5cc13e775873bfe1cad8&language=bg&query=")+encodeURIComponent(fn),
"method": "GET",  
"headers": {},
"data": "{}"
}

$.ajax(settings).done(function (response) {

for(var i = 0; i < response.results.length; i++) {
  var obj = response.results[i];

  var plakat = obj.poster_path;
  var movieId = obj.id;

  var title = obj.title.replace(/'/g, "&#39;");
  var title = title.replace(/"/g, '\\"');

  if (plakat !== null) {
    var poster = "https://image.tmdb.org/t/p/w92/"+plakat;
  } else { 
    var poster = ""; 
  }

  var overview = obj.overview.replace(/'/g, "&#39;");
  var overview = overview.replace(/"/g, '\\"');

  $("#movieList").append("<a href='javascript:showInfo("+'"'+title+'"'+","+'"'+overview+'"'+");'><img src='"+poster+"' height='102' width='82' style='padding:5px;'></a>");

}
}); 


function showInfo(title,overview){
  document.getElementById('myPopup').innerHTML = "<b>"+title+"</b>"+"  <br>"+overview; 
}

HTML

<div id="movieList" align="left"></div>
<div id="myPopup"></div>

【讨论】：