[英]Display elements in list with a counter of three
有这个引导分页,它显示了所有10个列表项,虽然我可以隐藏其余的元素并只显示三个,但当我点击下一个所有元素显示时,我只想显示下三个元素并隐藏前一个然后接下来的三个,依旧是上一个和下一个按钮。
这是css:
<style>
.hide {
display: none;
}
</style>
这是HTML:
<div class="page">
<nav>
<ul class="pagination pagination-lg">
<li class="page-item">
<span class="page-link prev" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</span>
</li>
<li class="page-item list"><a class="page-link" href="#">1</a></li>
<li class="page-item list"><a class="page-link" href="#">2</a></li>
<li class="page-item list"><a class="page-link" href="#">3</a></li>
<li class="page-item list"><a class="page-link" href="#">4</a></li>
<li class="page-item list"><a class="page-link" href="#">5</a></li>
<li class="page-item list"><a class="page-link" href="#">6</a></li>
<li class="page-item list"><a class="page-link" href="#">7</a></li>
<li class="page-item list"><a class="page-link" href="#">8</a></li>
<li class="page-item list"><a class="page-link" href="#">9</a></li>
<li class="page-item list"><a class="page-link" href="#">10</a></li>
<li class="page-item">
<span class="page-link next" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</span>
</li>
</ul>
</nav>
</div>
这是jquery:
<script>
$(document).ready(function() {
$(".list").slice(3).addClass('hide');
$("li:last-child").removeClass('hide');
$('.next').click(function() {
$('ul li').removeClass('hide');
});
});
</script>
这是JS小提琴: https : //jsfiddle.net/5d7kz732/
好吧,你的$('.next').click(function() {
几乎什么都没有$('.next').click(function() {
。
我添加了一个var position = 0;
每当我们点击时,跟踪当前位置并向其添加3。
if(list.length < position + 3) return
检查,这样我们就不会进一步关闭所有元素的长度。
list.slice(0, position).addClass('hide');
list.slice(position + 3).addClass('hide');
隐藏其余的。
使其适用于上一个按钮
$('.prev').click(function() {
if(0 > position - 3) return position = 0
position-=3;
$('ul li').removeClass('hide');
list.slice(0, position).addClass('hide');
list.slice(position + 3).addClass('hide');
$("li:last-child").removeClass('hide');
});
$(document).ready(function() { var list = $(".list") list.slice(3).addClass('hide'); $("li:last-child").removeClass('hide'); var position = 0; $('.next').click(function() { if (list.length < position + 3) return position += 3; $('ul li').removeClass('hide'); list.slice(0, position).addClass('hide'); list.slice(position + 3).addClass('hide'); $("li:last-child").removeClass('hide'); }); $('.prev').click(function() { if (0 > position - 3) return position = 0 position -= 3; $('ul li').removeClass('hide'); list.slice(0, position).addClass('hide'); list.slice(position + 3).addClass('hide'); $("li:last-child").removeClass('hide'); }); });
.hide { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="page"> <nav> <ul class="pagination pagination-lg"> <li class="page-item"> <span class="page-link prev" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </span> </li> <li class="page-item list"><a class="page-link" href="#">1</a></li> <li class="page-item list"><a class="page-link" href="#">2</a></li> <li class="page-item list"><a class="page-link" href="#">3</a></li> <li class="page-item list"><a class="page-link" href="#">4</a></li> <li class="page-item list"><a class="page-link" href="#">5</a></li> <li class="page-item list"><a class="page-link" href="#">6</a></li> <li class="page-item list"><a class="page-link" href="#">7</a></li> <li class="page-item list"><a class="page-link" href="#">8</a></li> <li class="page-item list"><a class="page-link" href="#">9</a></li> <li class="page-item list"><a class="page-link" href="#">10</a></li> <li class="page-item"> <span class="page-link next" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </span> </li> </ul> </nav> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.