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

【问题标题】：Hide and Showing loaded data (show more function)隐藏和显示加载的数据（显示更多功能）
【发布时间】：2016-08-05 15:27:54
【问题描述】：

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

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

我这样显示视频列表：

 $.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

感谢您的帮助。

【问题讨论】：

你试过什么你的代码在哪里，你需要聘请网络开发人员吗？
你的链接无效，所以我们帮不了你，最好把javascript代码贴在这里
等一下，我会更新的。
您尝试创建加载更多功能的代码在哪里？

标签： jquery html

【解决方案1】：

将 4 个视频包装在一个 div 中，使用 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();

});

【讨论】：

【解决方案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

【讨论】：