Javascript ajouter à IMDB api

Question

J'ai ce script, j'ai besoin de fixer ajouter et supprimer les anciennes infos sur le clic, aussi j'ai besoin de montrer les informations de l'épisode sur la troisième colonne. Comment faire ça?

J'ai besoin le même résultat que 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

Pour effacer l'ancienne information, utilisez .empty() avant que la boucle qui ajoute la nouvelle information.

De même, vous ne devez pas ajouter le gestionnaire de clic .row.season à chaque fois dans la boucle. Cela ajoute plusieurs gestionnaires aux premières lignes. Vous avez juste besoin de le faire une fois, et cela affectera toutes les lignes qui ont été ajoutées. Vous pouvez également utiliser la délégation d'événements pour le faire une fois au début de l'application, plutôt qu'après chaque appel AJAX. Voir Event binding on dynamically created elements?