在第一頁顯示過濾內容而不是顯示所有內容

Question

我還不熟悉jquery。根據我的代碼，用戶可以通過點擊「類別1」或「類別2」過濾內容，並且有內容分頁。

目前，我的代碼顯示了第一頁和其餘頁面上的所有內容。我想要的是起始頁面只顯示「類別1」的內容，而不點擊任何按鈕/鏈接。

我想如下所示的結果：項1，2，3，4，5，6，13和14是 「1類別」

希望一些你能提供給我下有一些建議。謝謝！

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

 
pageSize = 8; 
 
var i = 1; 
 
showPage = function(page) { 
 
$("li").hide(); 
 
$("li").each(function(n) { 
 
    if (n >= pageSize * (page - 1) && n < pageSize * page) 
 
     $(this).show(); 
 
});   
 
} 
 

 
showPage(i); 
 

 
function pagination(action) { 
 

 
var pages = Math.ceil(liToShow.length/pageSize); 
 
$('#pager').html(""); 
 
for (var i = 0; i<pages; i++) { 
 
    $('#pager').append('<a href="#" class="pageClick">'+(i+1)+'</a> &nbsp;'); 
 
} 
 
$('.pageClick').on('click', function(e) { 
 
    e.preventDefault(); 
 
    showPage($(this).index()+1); 
 
}); 
 

 
} 
 

 
pagination();

ul{list-style: none;} 
 

 
#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 id="pager"></div> 
 
</div>

Answer 1

只是觸發Category#1到點擊文件準備好方法，這樣

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