在点击弹出窗口显示错误的数据
问题描述:
我正在做一个电影计划页为我所用,但我面临的一个问题。 我想使页面弹出的电影,我点击的信息,但它总是显示在过去的电影列表中的信息。在点击弹出窗口显示错误的数据
我敢肯定,这是简单的东西,但我没有看到它。
我用得到我需要的信息代码:
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);
}
});
那么我想循环中的所有结果,这样我就可以改变在弹出窗口中显示的数据,但它不似乎没有用。
任何帮助将不胜感激。
答
这将显示每个电影的缩略图图像。当您单击缩略图,标题和描述(如果可用)将出现:
JS
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, "'");
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, "'");
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>
你能产生这个最小的版本?这是一个很多为这样一个简单的问题 –
涉水通过好像你对于发送您的列表中的每个条目一个Ajax请求,当他们回答,你覆盖你弹出的内容。所以你的弹出包含了最后解决的ajax请求的结果。而所有其他请求只是浪费时间和带宽。 – Thomas
希望这是更好看。 –