2017-03-17 1 views
1

내 용도로 영화 일정 페이지를 만들고 있지만 문제가 있습니다. 페이지 팝업을 내가 클릭 한 영화에 대한 정보로 만들고 싶지만 항상 목록의 마지막 영화 정보를 보여줍니다.클릭 팝업창에 잘못된 데이터가 표시됩니다.

나는 그것이 단순한 것이라고 확신하지만, 나는 그것을 보지 못했다.

내가 필요로하는 정보를 얻기 위해 사용하는 코드 :

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

그때 내가 그래서 팝업에 표시된 데이터를 변경할 수 있습니다 루프 모든 결과를 원하는을하지만, 아무튼 효과가없는 것 같습니다.

도움이 될 것입니다.

+0

당신이 최소한의 버전을 생성 할 수 HTML? 간단한 질문을하기 위해 많은 것을 할애합니다. –

+5

은 목록의 모든 항목에 대해 ajax 요청을 보내고 응답 할 때 팝업 내용을 덮어 씁니다. 따라서 팝업에는 마지막으로 해결되는 ajax 요청의 결과가 포함됩니다. 그리고 다른 모든 요청은 단지 시간과 대역폭 낭비였습니다. – Thomas

+0

이것이 더 잘 보이기를 바랍니다. –

답변

0

이렇게하면 각 동영상에 대한 미리보기 이미지가 표시됩니다. 당신이 나타납니다 (가능한 경우) 썸네일, 제목과 설명을 클릭하면 :

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, "&#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; 
} 

<div id="movieList" align="left"></div> 
<div id="myPopup"></div> 
관련 문제