Javascript append with IMDB api

Question

私はこのスクリプトを持っています。私は追加を修正し、クリックに関する古い情報を削除する必要があります。また、第3列にエピソード情報を表示する必要があります。どうやってするか？

私は新しい情報を追加ループの前に.empty()を使用し、古い情報をクリアするにはhttps://popcorntime-online.tv/game-of-thrones-season-1-episode-0-15-minute-preview.html?imdb=0944947-1-0

$(document).ready(function() { 
 
    console.log('jQuery'); 
 

 

 

 
    var baseUrl = "https://api.themoviedb.org/3/tv/"; 
 
    var apikey = "6b4357c41d9c606e4d7ebe2f4a8850ea"; 
 
    var appendToResponse = "credits"; 
 
    var id = 1399; 
 

 

 
    var dataUrl = baseUrl + id + "?api_key=" + apikey + "&append_to_response=" + appendToResponse; 
 

 
    $.getJSON(dataUrl, function(data) { 
 

 
    console.log(data); 
 

 

 
    var filmtitle = data.name; 
 
    var filmlength = data.episode_run_time; 
 
    var plot = data.overview; 
 

 

 
    var release = new Date(data.last_air_date); 
 
    var year = release.getFullYear(); 
 
    var seasons = data.seasons.length; 
 

 

 

 

 

 

 
    for (var i = 0; i < data.seasons.length; i++) { 
 
     $(".seasons").append("<div class='row season' data-season='" + data.seasons[i].season_number + "' onclick='seriesInfo(" + id + "," + data.seasons[i].season_number + ")' value='" + data.seasons[i].season_number + "'><a href='#'>Season " + data.seasons[i].season_number + "</a></div>"); 
 
     $('.row.season').click(function(e) { 
 
     e.preventDefault(); 
 
     $('.season').removeClass('activated'); 
 
     $(this).addClass('activated'); 
 
     }); 
 

 
    } 
 

 
    }); 
 

 
}); 
 

 
function seriesInfo(id, num) { 
 
    var seriesURL = "https://api.themoviedb.org/3/tv/" + id + "/season/" + num + "?&api_key=6b4357c41d9c606e4d7ebe2f4a8850ea"; 
 
    $.getJSON(seriesURL, function(data) { 
 
    console.log(data); 
 
    for (var i = 0; i < data.episodes.length; i++) { 
 
     var seasonname = data.name; 
 
     var seasonoverview = data.overview; 
 
     var episode = data.episodes[i].name; 
 
     var number = data.episodes[i].episode_number; 
 
     var overview = data.episodes[i].overview; 
 
     var airdate = data.episodes[i].air_date; 
 
     $(".episodes").append("<div data-episode_id='" + number + "' data-episode_num='" + number + "' onclick='seriesShow(" + id + "," + data.episodes[i].episode_number + ")' value='" + data.episodes[i].episode_number + "'class='row episode'><a href='#'><span class='episode_num'>" + number + "</span>&nbsp;&nbsp;<span class='episode_title'>" + episode + "</span><div class='pseudo_click_listener'></div></a></div>"); 
 

 

 

 
    } 
 
    }); 
 
} 
 

 
function seriesShow(id, num) { 
 
    var episodeURL = "https://api.themoviedb.org/3/tv/" + id + "/season/" + num + "/episode/" + num + "?&api_key=6b4357c41d9c606e4d7ebe2f4a8850ea"; 
 
    $.getJSON(episodeURL, function(data) { 
 
    console.log(data); 
 
    for (var i = 0; i < data.episodes.length; i++) { 
 

 
     var seasonoverview = data.overview; 
 
     var episode = data.episodes[i].name; 
 
     var number = data.episodes[i].episode_number; 
 
     var overview = data.episodes[i].overview; 
 
     var airdate = data.episodes[i].air_date; 
 
     $(".show").prepend("<div class='column content'><div class='episode_name'>" + episode + "</div><div class='episode_info'><b class='episode_number'>Episode " + number + "</b></div><div class='episode_overview'>" + overview + "</div>"); 
 

 
    } 
 
    }); 
 
}

.synopsis { 
 
    font-size: 13px; 
 
    line-height: 18px; 
 
    color: rgba(255, 255, 255, 0.65); 
 
    padding-right: 20px; 
 
    height: 120px; 
 
    overflow: auto; 
 
} 
 

 
.head { 
 
    color: #fff; 
 
    width: 100%; 
 
    height: 240px; 
 
    position: absolute; 
 
    top: 65px; 
 
    left: 0; 
 
    border-bottom: 1px rgba(255, 255, 255, 0.05) solid; 
 
    z-index: 9; 
 
} 
 

 
.info_cont { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 185px 
 
} 
 

 
.runtime_cont { 
 
    display: none; 
 
} 
 

 
.poster { 
 
    position: absolute; 
 
    top: 25px; 
 
    left: -200px; 
 
    width: 135px; 
 
    height: 197px; 
 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 1); 
 
    border: 1px rgba(255, 255, 255, 0.18) solid; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
    opacity: 0; 
 
    transition-property: all; 
 
    transition-duration: 0.21s; 
 
    transition-timing-function: ease-out; 
 
} 
 

 
.poster.fadein { 
 
    opacity: 1; 
 
    left: 20px; 
 
} 
 

 
.body { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    bottom: 0; 
 
    z-index: 9; 
 
    box-sizing: border-box; 
 
    background: linear-gradient(to right, rgba(0, 0, 0, 0.27) 0%, rgba(0, 0, 0, 0.75) 100%); 
 
    /* W3C */ 
 
} 
 

 
.column { 
 
    float: left; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    padding: 20px; 
 
    position: relative; 
 
} 
 

 
.column.seasons { 
 
    width: 15%; 
 
    overflow: hidden; 
 
} 
 

 
.column.episodes { 
 
    width: 40%; 
 
    overflow: hidden; 
 
} 
 

 
.column.content { 
 
    width: 45%; 
 
} 
 

 
.row { 
 
    height: 35px; 
 
    border-bottom: 1px rgba(255, 255, 255, 0.045) solid; 
 
    font-size: 14px; 
 
    color: #fff; 
 
    line-height: 35px; 
 
    padding: 0 6px; 
 
    box-sizing: border-box; 
 
    cursor: pointer; 
 
    position: relative; 
 
    overflow: hidden; 
 
    transition-property: padding; 
 
    transition-duration: 0.1s; 
 
    transition-timing-function: linear; 
 
} 
 

 
.row * { 
 
    cursor: pointer !important; 
 
} 
 

 
.row:hover, 
 
.row.khover { 
 
    padding: 0 12px; 
 
    border-left: 3px rgba(255, 255, 255, 0.4) solid; 
 
} 
 

 
.row.activated { 
 
    padding: 0 12px !important; 
 
    border-left: 3px rgba(255, 255, 255, 0.8) solid !important; 
 
} 
 

 
.row:nth-child(odd) { 
 
    background: linear-gradient(to right, rgba(255, 255, 255, 0.125) 0%, rgba(255, 255, 255, 0) 100%); 
 
    /* W3C */ 
 
} 
 

 
.row.episode .pseudo_click_listener { 
 
    position: absolute; 
 
    width: 16px; 
 
    height: 100%; 
 
    right: 0; 
 
    top: 0; 
 
    z-index: 9; 
 
} 
 

 
.row .episode_title { 
 
    opacity: 0.4; 
 
} 
 

 
.row:hover .episode_title, 
 
.row.activated .episode_title { 
 
    opacity: 0.68; 
 
} 
 

 
.row .episode_num { 
 
    font-family: opensansbold 
 
} 
 

 
.scroller_cont { 
 
    padding-bottom: 15px; 
 
} 
 

 
.episode_name { 
 
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); 
 
    font-size: 22px; 
 
    color: #fff; 
 
    font-family: opensansbold; 
 
} 
 

 
.episode_info { 
 
    font-size: 13px; 
 
    color: rgba(255, 255, 255, 0.4); 
 
    padding: 2px 0 15px; 
 
} 
 

 
.episode_overview { 
 
    height: calc(100% - 135px); 
 
    overflow: auto; 
 
    color: rgba(255, 255, 255, 0.64); 
 
    font-size: 12px; 
 
    line-height: 16px; 
 
} 
 

 
.toolbox_content { 
 
    height: 60px; 
 
    position: absolute; 
 
    bottom: 10px; 
 
    left: 20px; 
 
    z-index: 9; 
 
    width: 100%; 
 
} 
 

 
.selector { 
 
    margin-bottom: 5px; 
 
    width: 160px !important; 
 
} 
 

 
.sep { 
 
    margin-right: 15px !important; 
 
} 
 

 
.row.episode.watched:after { 
 
    content: "\e601"; 
 
    color: rgba(255, 255, 255, 0.4); 
 
} 
 

 

 
.row.episode:after { 
 
    font-family: icomoon; 
 
    content: "\e60d"; 
 
    position: absolute; 
 
    right: 0; 
 
    font-size: 11px; 
 
    color: rgba(255, 255, 255, 0.12); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="body"> 
 
    <div class="column seasons"></div> 
 

 
    <div class='column episodes'></div> 
 
    <div class='show'></div>

Answer 1

と同じ結果を必要としています。

また、ループのたびに.row.seasonクリックハンドラを追加しないでください。初期の行に複数のハンドラが追加されます。一度だけ実行すれば、追加されたすべての行に影響します。

$(".seasons").empty(); 
for (var i = 0; i < data.seasons.length; i++) { 
    $(".seasons").append("<div class='row season' data-season='" + data.seasons[i].season_number + "' onclick='seriesInfo(" + id + "," + data.seasons[i].season_number + ")' value='" + data.seasons[i].season_number + "'><a href='#'>Season " + data.seasons[i].season_number + "</a></div>"); 
} 
$('.row.season').click(function(e) { 
    e.preventDefault(); 
    $('.season').removeClass('activated'); 
    $(this).addClass('activated'); 
}); 

イベントの委任を使用して、すべてのAJAX呼び出しの後ではなく、アプリケーションの開始時に1回行うこともできます。 Event binding on dynamically created elements?