添加分頁到滑塊過濾，並顯示過濾的內容onload

Question

我試圖將代碼更改爲以下要求。

1. 改變「prev」和「下一個」按鈕，分頁（例如，1 2 3 4等）

2. 顯示「類別1」的內容，而不是節目的所有內容。按如下所示顯示過濾後的內容。我做到了這一點，但不確定是否夠好。

   

其實我還是不熟悉的jQuery和JavaScript。過去幾周我一直試圖弄清楚下面的代碼，但是失敗了。希望你們中的一些人能夠向我提供一些建議。謝謝！

//Show filtred image onload 
 
$(document).ready(function(){ 
 
    $('div.filter a:first-child').trigger('click'); 
 
}); 
 

 
var visible = ""; 
 

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

 

 
var itemsNumber = 8; 
 
var min = 0; 
 
var max = itemsNumber; 
 

 
function pagination(action) { 
 

 
    var totalItems = $("li" + visible).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" + visible).slice(min, max).show(); 
 

 
} 
 

 
pagination(); 
 

 

 
//Next 
 
$("#next").click(function() { 
 

 
    action = "next"; 
 
    pagination(action); 
 

 
}) 
 

 
//Previous 
 
$("#prev").click(function() { 
 
    action = "prev"; 
 
    pagination(action); 
 

 
})

#item-wrapper { 
 
width:250px; 
 
margin:30px 0 0 30px; 
 
} 
 
.items li { 
 
font-family:arial; 
 
font-size:13px; 
 
background-color:#ccc; 
 
margin-bottom:1px; 
 
padding:5px;  
 
} 
 
.ctrl-nav { 
 
    background-color:#999; 
 
    padding:5px; 
 
    overflow:hidden; 
 
} 
 
.ctrl-nav a { 
 
    font-family:arial; 
 
font-size:13px; 
 
    padding:5px 10px; 
 
    color:#fff; 
 
} 
 
.ctrl-nav a#prev{ 
 
float:left; 
 
} 
 
.ctrl-nav a#next{ 
 
float:right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

Answer 1

這裏有我的做法......

CSS：

div.ctrl-nav a { 
    padding: 5px; 
    margin-right: 2px; 
    color: white; 
    background: black; 
} 

div.ctrl-nav a.selected { 
    background: red; 
} 

JQUERY：

var selCatId = null; 
var pageLength = 3; 

// Filters. 
$('div.filter').on('click','a',function(e) { 

    e.preventDefault(); 

    // Get the category id from the href attribute. 
    selCatId = $(this).attr('href').substring(1); 

    // Create pagination. 
    var nPages = Math.ceil($('div#item-wrapper ul.items li.'+selCatId).length/pageLength), 
     pages = []; 

    // Create and show page numbers. 
    for (var i=1; i<=nPages; i++) 
     pages.push('<a href="#">'+i+'</a>'); 
    $('div.ctrl-nav').html(pages.join('')); 

    // Activate page number selection. 
    $('div.ctrl-nav a').click(function(e) { 

     e.preventDefault(); 

     var pageInit = (parseInt($(this).text())-1)*pageLength; 

     $('div#item-wrapper ul.items li').hide() 
             .filter('.'+selCatId) 
             .slice(pageInit,pageInit+pageLength) 
             .show(); 

     // Mark the active page. 
     $('div.ctrl-nav a').removeClass('selected').filter(this).addClass('selected'); 
    }); 

    // Show first page of the selected category. 
    $('div.ctrl-nav a:first').trigger('click'); 
}); 

// Show 'Category 1' when page loads. 
$('div.filter a:first').trigger('click'); 

...和工作文件... https://fiddle.jshell.net/rigobauer/zpdk9e6q/

注意：當您選擇一個新的類別，它進入該類別的第一頁。我希望它可以幫助