大家好,感谢您的帮助。我试图实现一个简单的分页过滤,隐藏li的类。示例是here。我是新手,但有一些帮助,主要想法是工作。唯一的问题是,当我点击过滤我想要分页只是那个类别的李。因此,如果我点击“类别1”链接,那么当我点击下一个上一个时,带有“category-2”类的li应该是隐藏的而不是APPEAR。
HTML
<div class="filter">
<a href="#category-1">category 1</a>
<a href="#category-2">category 2</a>
</div>
<div id="item-wrapper">
<ul class="items">
<li class="category-1">item 1</li>
<li class="category-1">item 2</li>
<li class="category-1">item 3</li>
<li class="category-1">item 4</li>
<li class="category-1">item 5</li>
<li class="category-1">item 6</li>
<li class="category-2">item 7</li>
<li class="category-2">item 8</li>
<li class="category-2">item 9</li>
<li class="category-2">item 10</li>
<li class="category-2">item 11</li>
<li class="category-2">item 12</li>
<li class="category-1">item 13</li>
<li class="category-1">item 14</li>
<li class="category-2">item 15</li>
</ul>
<div class="ctrl-nav">
<a href="#" id="prev">Previous</a><a href="#" id="next">Next</a>
</div>
</div>
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 < totalItems) {//Stop action if max reaches more than total items
if (action == "next") {
min = min + itemsNumber;
max = max + itemsNumber;
}
}
if (min > 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);
})
任何帮助都会很好:)
答案 0 :(得分:3)
我已更新您的脚本:http://jsfiddle.net/vU9Hv/12/
基本上,我引入了一个新变量visible
,其中包含要显示的所选li
类。然后,pagination
函数处理li
的所有显示/隐藏。默认情况下,该变量设置为空白;因此,所有li
s将最初显示。 pagination
函数将以:
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();
});