Jquery - divクラスのコンテンツをクリックした動画の詳細に変更する

Question

私はハイブリッドアプリのYouTubeのような動画を再生しています。私は、各機能を使用してデータを取り込み/表示し、ウェブサーバーによってスローされたjsonデータからデータを追加します。私はここにサンプルJSONデータを持っている

：

[{"video_id":"1","video_youtube_title":"This is the latest video", 
"video_youtube_description":"Discription for the primary video.", 
"video_youtube_thumbnail":"https://i.ytimg.com/vi/aVS4W7GZSq0/hqdefault.jpg", 
"video_youtube_date_published":"2016-07-15 13:37:00", 
"video_youtube_duration":"PT16M15S", 
"video_youtube_link":"aVS4W7GZSq0", 
"video_fb_link":"example/posts/1715658608683485", 
"video_date_added":"2016-07-14 23:45:58"}] 
, 
[{ 
"video_id":"2", 
"video_youtube_title":"Title 1", 
"video_youtube_description":"Description1", 
"video_youtube_thumbnail":"https://i.ytimg.com/vi/kPDnw3_1GOI/hqdefault.jpg", 
"video_youtube_date_published":"2016-03-07 15:00:00", 
"video_youtube_duration":"PT1M16S", 
"video_youtube_link":"kPDnw3_1GOI", 
"video_fb_link":"example/posts/1666877406894939", 
"video_date_added":"2016-03-09 07:00:00"} 
, 
{ 
"video_id":"3", 
"video_youtube_title":"Title 2", 
"video_youtube_description":"Description2", 
"video_youtube_thumbnail":"https://i.ytimg.com/vi/dRjE1JwdDLI/hqdefault.jpg", 
"video_youtube_date_published":"2016-03-08 16:00:00", 
"video_youtube_duration":"PT1M16S", 
"video_youtube_link":"dRjE1JwdDLI", 
"video_fb_link":"example/posts/1666877406894939", 
"video_date_added":"2016-03-09 06:00:00"}] 

だから、最初の配列は、プライマリビデオで、次の配列は、リストの動画です。ここで

は私のサンプルコードでは、私のプライマリビデオにデータを追加している：ここでは

var primary_videolink = (data[1][0].video_youtube_link); 
var primary_videodescription = (data[1][0].video_youtube_description); 
var primary_videodatepublished = (data[1][0].video_youtube_date_published); 
var primary_videotitle = (data[1][0].video_youtube_title); 

$('#primary-video').append('<iframe id="video" width="100%" height="auto"  src="https://www.youtube.com/embed/'+ primary_videolink + '" frameborder="0" allowfullscreen></iframe>'+ 
    '<div class="primary-video-details-wrap">'+ 
    '<div class="primary-videotitle"> '+primary_videotitle+' <i class="fa fa-check-square" aria-hidden="true"></i></div>'+ 
    '<div class="primary-videodatepublished"> Published on '+primary_videodatepublished +'</div>'+   '<div class="primary_videodescription">'+primary_videodescription+'</div>'+    
'</div>' 
); 

は、私のビデオリストにデータを追加することで、私のサンプルコードです：

$.each(data[2], function(i, row) { 
    var video_link = row.video_youtube_link; 
    var video_img = row.video_youtube_thumbnail; 
    var video_title = row.video_youtube_title; 
    var video_description = row.video_youtube_description; 
    var video_duration = row.video_youtube_duration; 
    var video_published = row.video_youtube_date_published; 

    var str = "<div class='video-list-wrapper'>"; 
    str += "<div class='video-wrap'>"; 
    str += "<div class='left-video-info'><a href=#null onclick=document.getElementById('video').src='http://www.youtube.com/embed/"+video_link+"'><img src="+ video_img +" width='100%' height='auto'></a><span class='video-duration'>"+parseDuration(video_duration)+"</span></div>";     
    str += "<div class='right-video-info'>"; 
    str += "<div class='video-title'>"+video_title+"</div>"; 
    str += "<div class='video-date'>"+ video_published +" ago</div>"; 
    str += "</div>";//right-info 
    str += "</div>";//video-wrap 
    str += '</div>'; 
    $('#video-list').append(str); 
}); 

コードが正常に動作しますプライマリビデオとその下のビデオ（サムネール）のリストを表示します。サムネイルのいずれかをクリックすると、それに含まれるYouTubeのURLに従って、プライマリビデオを変更することができます。これはうまくいきます。これはそれがどのように見えるかです。

を追加しました：Jsfiddle https://jsfiddle.net/xkevin/h2hegehv/

私の問題は今の詳細（ビデオタイトル、説明、日付など）私がクリックしたビデオのを表示する方法についてです。そのため、プライマリビデオの詳細が変更される可能性があります（ビデオだけでなく）*。 jqueryを使用してクリックした動画に応じて詳細を変更する方法はありますか？あなたが私の問題を理解することを願っていますありがとうございました！

編集：私は、このビデオプレイリストをより良く開発する方法や、このようなことをするために何を考慮すべきかに関する提案をお待ちしています。ありがとう。

私が書いたとできるだけ少ないとしていくつかのコードを修正するが、あなたが望むものを達成、 は多分あなたが見ることができている

Answer 1

：==============

var video_inf_array = []; 
$.each(data[2], function(i, row) { 

    var video_link = row.video_youtube_link; 
    var video_img = row.video_youtube_thumbnail; 
    var video_title = row.video_youtube_title; 
    var video_description = row.video_youtube_description; 
    var video_duration = row.video_youtube_duration; 
    var video_published = row.video_youtube_date_published; 

    var all_video_inf = { // an object to carry one video's all information 
    video_link : video_link, 
    video_img : video_img , 
    video_title : video_title , 
    video_description : video_description , 
     // ... all key value above ,and maybe u wanna simplify it like 'video_published : row.video_youtube_date_published' 
    } 

    var str = "<div class='video-list-wrapper'>"; 
    str += "<div class='video-wrap'>"; 
    str += "<div class='left-video-info'><a href=#null onclick=\"replace_to_primary("+i+")\"><img src="+ video_img +" width='100%' height='auto'></a><span class='video-duration'>"+parseDuration(video_duration)+"</span></div>";     
    str += "<div class='right-video-info'>"; 
    str += "<div class='video-title'>"+video_title+"</div>"; 
    str += "<div class='video-date'>"+ timeago(date)+" ago</div>"; 
    str += "</div>";//right-info 
    str += "</div>";//video-wrap 
    str += '</div>'; 
    $('#video-list').append(str); 

    video_inf_array.push(all_video_inf); //push this video's information to an array 
}); 

function replace_to_primary(index){ 

    $('#video').attr('src',video_inf_array[index].video_link); 
    $('.primary-videotitle').text(video_inf_array[index].video_title); 
    $('.primary_videodescription').text(video_inf_array[index].video_description); 

    // ... handle other information like above pattern . 

} 

========================================== ===========

申し訳ありませんが、私はできるだけ少なく修正していますが、今私はこれを明確にするためにもう少し修正しています。 onClick（）を使用することは悪い習慣であると言って、here is why。ここ

私はより多くのjQueryを使ってそれを行うので、index() APIは多分あなたは=より多くに見たいというキーです） はJSFiddleです：https://jsfiddle.net/Carr1005/pusyyen1/2/