Question

我使用ajax从我的网络服务器获取json数据。这些数据是视频网址和信息。

我怎样才能显示前四个视频。然后隐藏其他视频（当它们已经加载到HTML时）。然后添加show more按钮功能以显示列表中的其他四个视频。

我会像这样显示视频列表：

 $.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); 
});

好的，我试图用废料制作一个功能。它现在正在运作..

   $(document).ready(function () {
    var numvideo = $('.video-list-wrapper').length;
    x=3;
    $('.video-list-wrapper:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= numvideo) ? x+5 : numvideo;
        $('.video-list-wrapper:lt('+x+')').show();
    });
});

以下是显示填充数据的示例： Sample

感谢您的帮助。

Answer 1

在div中包装4个视频，使用hide()隐藏第一个视频在按钮上单击隐藏上一个并显示下一个

$.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;
   str = '';
   if(i%4 == 0) { 
    str += "<div class='video-4-wrap'>";
   }
   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>';
   if(i%4 == 0) { 
    str += "</div>";//video-4-wrap
   }
  $('#video-list').append(str); 
}); 

$('.video-4-wrap').not(':first').hide();
$('button').click(function(){
var viz = $('.video-4-wrap:visibile');
viz.prev().hide();
viz.next().show();

});

Answer 2

我试着在搜索时做出答案..这是我最后的输出。感谢那些努力帮助我的人。

 var numvideo = $('.video-list-wrapper').length;

  addvideo = 4;
  $('.video-list-wrapper:lt(' + addvideo + ')').show();
  $('#loadMore').click(function() {
    addvideo = (addvideo + 4 <= numvideo) ? addvideo + 4 : numvideo;
    $('.video-list-wrapper:lt(' + addvideo + ')').show();
  });
  $('#showLess').click(function() {
    addvideo = (addvideo - 4 < 0) ? 4 : addvideo - 4;
    $('.video-list-wrapper').not(':lt(' + addvideo + ')').hide();
  });

此处的工作代码：jsfiddle

隐藏和显示加载的数据（显示更多功能）

2 个答案: