2017-03-17 14 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); 
 
    } 
 
});

が、私はので、私は、ポップアップで表示されるデータを変更することができますループのすべての結果をしたいが、それはdoesnのうまくいきません。

ご迷惑をおかけして申し訳ございません。

+0

あなたは、この最小限のバージョンを作ることはできますか?このような簡単な質問のためには、多くのことがあります。 –

+5

あなたのリストのすべてのエントリに対してajax-requestを送信し、応答したときにポップアップの内容を上書きするようです。したがって、あなたのポップアップには最後に解決する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; 
} 

HTML

<div id="movieList" align="left"></div> 
<div id="myPopup"></div> 
関連する問題