過濾和分頁

Question

嗨，感謝您的幫助。我試圖實現一個簡單的分頁過濾，隱藏li的類。該示例是here。我是新來的，但有一些幫助，主要想法正在工作。唯一的問題是，當我點擊過濾我想分頁只是在該類別的李。所以如果我點擊「類別1」鏈接，那麼類別爲「類別-2」的李應該隱藏，而不是顯示，當我點擊下一步o prev。

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); 

}) 

任何幫助將是不錯:)

Answer 1

我已經更新了你的腳本：http://jsfiddle.net/vU9Hv/12/

基本上，我介紹了一個新的變量visible其中包含選定的li要顯示的類。然後，pagination函數處理所有顯示/隱藏li s。該變量默認設置爲空白;因此，所有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(); 
});