javascript - 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 网址进行更改。这工作正常。这就是它的样子。

添加: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/