此引导程序分页显示了所有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(){
我添加了一个var position = 0;跟踪当前位置并在每次单击时添加3.
if(list.length< position 3)返回检查,这样我们就不会进一步缩短所有元素的长度.
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。