javascript – 如何使用jquery将项目列表转换为“多页”列表

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用jquery将项目列表转换为“多页”列表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一个动态创建帖子列表的网站,我无法访问创建内容功能,所以我必须处理输出内容.

函数以列表格式创建21个项目(一个在另一个上面).我想要达到的目标可能是一次只能看到7个,并且可以通过箭头导航对各种项目进行随机播放.

$("#wrap > div").slice(0,7).css("background","yellow");
$("#wrap > div").slice(7,14).css("background","red");
$("#wrap > div").slice(14,21).css("background","blue");

使用.slice我已经能够设置7个集合,但就如何隐藏和滚动集合而言,我有点迷失.

任何帮助将不胜感激

https://jsfiddle.net/ga8vtojg/

最佳答案
DEMO

var page = 1;
$("#wrap > div").slice(0,7).addClass('page1').css("background",14).addClass('page2').css("background","red").hide();
$("#wrap > div").slice(14,21).addClass('page3').css("background","blue").hide();
var maxPage = 3;
$('.next').on('click',function() {
  if (page < maxPage) {
    $("#wrap > div:visible").hide();
    $('.page' + ++page).show();
  }
})
$('.prev').on('click',function() {
  if (page > 1) {
    $("#wrap > div:visible").hide();
    $('.page' + --page).show();
  }
})

猜你在找的jQuery相关文章