我有一个拥有多个卡的网站。这些卡可以通过html中的value =“”进行过滤。我需要帮助来弄清楚如何添加上一个和下一个按钮，以保持选择了哪些过滤器的逻辑。如果页面为1，则需要禁用上一个按钮，而数字位于分页的最后一个数字[-1]上，则禁用下一个按钮
这就是我到目前为止jsfiddle
HTML
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="1.js"></script>
<link rel="stylesheet" href="1.css">
</head>
<body>
<p>filter partner listing</p>
<div class="tag-filters">
<div class="checkbox">
<input class="checkbox" type="checkbox" value="tag-10" id="check1" />
<label class="checklabel" for="check1">tag 10</label>
<input class="checkbox" type="checkbox" value="tag-11" id="check2" />
<label class="checklabel" for="check2">Tag 11</label>
<input class="checkbox" type="checkbox" value="tag-12" id="check3" />
<label class="checklabel" for="check3">Tag 12</label>
<input class="checkbox" type="checkbox" value="tag-13" id="check4" />
<label class="checklabel" for="check4">Tag 13</label>
</div>
</div>
<br />
Pagination:
<div class="pagination">
<li><a href="#">1</a></li>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-10" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 10</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-10" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 10</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-10" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 10</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-10" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 10</a>
</li>
</ul>
</div>
<br>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-11" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 11</a>
</li>
</ul>
</div>
<br>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-12" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 12</a>
</li>
</ul>
</div>
<br>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-13" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 13</a>
</li>
</ul>
</div>
<br>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-11" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 11</a>
</li>
</ul>
</div>
<br>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-10" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 10</a>
</li>
</ul>
</div>
<br>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-12" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 12</a>
</li>
</ul>
</div>
<br>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-12" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 12</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-12" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 12</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-12" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 12</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-11" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 11</a>
</li>
</ul>
</div>
<br>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-10" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 10</a>
</li>
</ul>
</div>
<br>
<div class="col-md-4">
<ul class="tags inline">
<li class="tag-11" itemprop="keywords">
<a href="/component/tags/tag/jeugdhulp" class="label label-info">Tag 11</a>
</li>
</ul>
</div>
</body>
<style>
.pagination li {
display: inline-block
}
</style>
</html>
JS
var size = 5;
var $cont,chunks;
var html = '';
$(document).ready(function() {
$cont = $('.col-md-4');
var filterChecks = $('.tag-filters :checkbox');
createPagination($cont);
filterChecks.change(function() {
html = '';
var results = [];
var classSelectors = filterChecks.filter(':checked').map(function() {
return '.' + this.value;
}).get();
if(classSelectors.length){
for(var x = 0; x < $cont.has(classSelectors.join()).length; x++){
results.push($cont.has(classSelectors.join())[x]);
}
createPagination(results);
} else {
createPagination($cont);
}
});
$('div.pagination').on('click', 'a', function(){
$cont.hide();
$(chunks[parseInt($(this).text())-1]).show();
});
});
function createPagination(data){
chunks = new Array(Math.ceil(data.length / size)).fill("").map(function() {
return this.splice(0, size)
}, data.slice());
$cont.hide();
for(var i = 0; i < chunks.length; i++){
html += '<li><a href="#">'+(i+1)+'</li>';
}
$('div.pagination').html(html);
$(chunks[0]).show();
}