【发布时间】：2022-01-14 19:10:46
【问题描述】：
我正在尝试使用 JS 添加过滤器下拉菜单和分页。过滤器下拉菜单工作正常。但是不知道怎么用JS添加分页功能。
我的问题是：
- 即使在用户单击过滤器菜单后，我是否可以在每页仅显示 8 个缩略图？
- 过滤结果小于8个时，是否可以隐藏分页？
这是图片和代码。任何建议将不胜感激。
<body>
<div class="container">
<div class="row">
<div class="select mb-3 mt-3">
<select class="type mr-2">
<option value="all">Type</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<select class="grade mr-2">
<option value="all">Grade</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<select class="subject mr-2">
<option value="all">Subject</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
</div>
<div class="row">
<div class="col-3 property-item" data-grade="one" data-type="two" data-subject="three"><img src="https://picsum.photos/200"><br />image one</div>
<div class="col-3 property-item" data-grade="two" data-type="one" data-subject="one"><img src="https://picsum.photos/200"><br />image one</div>
<div class="col-3 property-item" data-grade="four" data-type="one" data-subject="one"><img src="https://picsum.photos/200"><br />image one</div>
<div class="col-3 property-item" data-grade="two" data-type="four" data-subject="two"><img src="https://picsum.photos/200"><br />image one</div>
<div class="col-3 property-item" data-grade="one" data-type="two" data-subject="one"><img src="https://picsum.photos/200"><br />image one</div>
<div class="col-3 property-item" data-grade="two" data-type="three" data-subject="one"><img src="https://picsum.photos/200"><br />image one</div>
<div class="col-3 property-item" data-grade="three" data-type="one" data-subject="one"><img src="https://picsum.photos/200"><br />image one</div>
<div class="col-3 property-item" data-grade="two" data-type="one" data-subject="one"><img src="https://picsum.photos/200"><br />image one</div>
<div class="col-3 property-item" data-grade="one" data-type="three" data-subject="one"><img src="https://picsum.photos/200"><br />image one</div>
<div class="mb-3 mt-3">
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
<script>
$("select.grade, select.type, select.subject").change(update);
function update() {
var resourceGrade = $('select.grade').val();
var resourceType = $('select.type').val();
var resourceSubject = $('select.subject').val();
$('.property-load-section')
.find('.property-item')
.hide()
.filter(function () {
var okResourceType = true;
if (resourceType !== "all") {
okResourceType = $(this).attr('data-type').split(',').includes(resourceType);
}
var okResourceGrade = true;
if (resourceGrade !== "all") {
okResourceGrade = $(this).attr('data-grade').split(',').includes(resourceGrade);
}
var okResourceSubject = true;
if (resourceSubject !== "all") {
var okResourceSubject = $(this).attr('data-subject').split(',').includes(resourceSubject);
}
return okResourceGrade && okResourceType && okResourceSubject;
})
.fadeIn('fast');
}</script>
【问题讨论】：
-
您是否从后端服务器获取图像数据？
-
没有。我没有使用数据。我将使用 html 代码来显示图像。
标签： javascript drop-down-menu pagination