Jquery - 將div類的內容更改爲點擊視頻的詳細信息

Question

我正在爲我的混合應用製作視頻播放列表，比如youtube。我使用每個函數填充/顯示數據，並將它們從Web服務器拋出的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網址進行更改。這工作正常。這是它的樣子。

補充：現在的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/