过滤和分页

嗨，大家好，感谢您的帮助。 我试图实现一个简单的分页过滤，隐藏li的类。 这个例子在这里 。 我是新手，但有一些帮助，主要想法是工作。 唯一的问题是，当我点击过滤我想要只分页那个类别中的li。 因此，如果我点击“类别1”链接，那么当我点击下一个上一个时，带有“category-2”类的li应该是隐藏的而不是APPEAR。

HTML

 category 1 category 2 
 
 
 
item 1
 
item 2
 
item 3
 
item 4
 
item 5
 
item 6
 
item 7
 
item 8
 
item 9
 
item 10
 
item 11
 
item 12
 
item 13
 
item 14
 
item 15
 
 
 PreviousNext 
  

JS

 $('div.filter').delegate('a', 'click', function (event) { $('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show(); event.preventDefault(); }); var itemsNumber = 6; var min = 0; var max = itemsNumber; function pagination(action) { var totalItems = $("li").length; if (max  0) {//Stop action if min reaches less than 0 if (action == "prev") { min = min - itemsNumber; max = max - itemsNumber; } } $("li").hide(); $("li").slice(min, max).show(); } pagination(); //Next $("#next").click(function() { action = "next"; pagination(action); }) //Previous $("#prev").click(function() { action = "prev"; pagination(action); }) 

你能帮忙的话，我会很高兴 ：）

Answer 1

我更新了你的脚本： http ： //jsfiddle.net/vU9Hv/12/

基本上，我引入了一个新的变量visible ，其中包含要显示的所选li类。 然后， paginationfunction处理li的所有显示/隐藏。 默认情况下，该变量设置为空白; 因此，所有的li将最初显示。 paginationfunction将从以下开始：

 var totalItems = $("li" + visible).length; 

并结束：

 $("li" + visible).slice(min, max).show(); 

点击处理程序转换为：

 $('div.filter').delegate('a', 'click', function (event) { visible = '.' + this.href.slice(this.href.indexOf("#") + 1); pagination(); event.preventDefault(); });