2016-07-28 2 views
0

Я делаю плейлист для видео, как youtube для моего гибридного приложения. Я заполняю/отображаю данные с помощью каждой функции и добавляю их из json-данных, созданных веб-сервером.JQuery - изменить содержимое div-класса на детали щелкнутого видео

У меня есть образец 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); 
}); 

код работает отлично и отображает основное видео и список видео (миниатюр) ниже. Когда я нажимал на любой из миниатюр, основное видео может изменяться в соответствии с URL-адресом YouTube, который он содержит. Это работает нормально. Вот как это выглядит.

Добавлено: Jsfiddle https://jsfiddle.net/xkevin/h2hegehv/

Моя проблема теперь о том, как показать детали (видео название, описание, дата и т.д.) на видео я щелкнул. Так что первичная информация о видео может быть изменена тоже * (не только видео) *. Есть ли способ изменить детали в зависимости от того, какое видео я нажал, используя jquery? Надеюсь, вы понимаете мою проблему. Спасибо!

Редактировать: Я открыт для любого предложения о том, как я могу лучше разработать этот плейлист или что я должен учитывать, чтобы сделать эту тренировку. Благодарю.

ответ

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() апи является ключом, который может быть, вы хотите посмотреть в более =) вот JSFiddle: https://jsfiddle.net/Carr1005/pusyyen1/2/

+0

Спасибо за ваш ответ, но я parseerror при добавлении толчок массив в коде. –

+0

э-э ... вы могли бы предоставить более подробное описание? возможно, я мог бы дать помощь – Carr

+0

oops. его странно, теперь ошибка 'video_inf_array' не определяется, когда я нажимаю миниатюру ... –

Смежные вопросы