JS控制多个相同id的div块的显示和隐藏,实现分页和每页显示个数效果
时间: 2024-01-28 16:03:15 浏览: 31
首先,不建议在HTML中使用相同id的元素,这会导致JavaScript无法准确地选择元素。应该使用class来代替。
以下是一个实现分页和每页显示个数效果的示例代码:
HTML部分:
```html
<div class="page">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
</div>
<div class="pagination">
<button class="prev">上一页</button>
<button class="next">下一页</button>
</div>
```
CSS部分:
```css
.page {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 600px;
margin: 0 auto;
}
.item {
width: 100px;
height: 100px;
background-color: #ccc;
margin-bottom: 20px;
display: none;
}
.pagination {
margin-top: 20px;
text-align: center;
}
.pagination button {
padding: 10px;
margin: 0 10px;
}
```
JavaScript部分:
```javascript
var items = document.querySelectorAll('.item');
var prevBtn = document.querySelector('.prev');
var nextBtn = document.querySelector('.next');
var page = 1;
var pageSize = 5;
function showPage() {
for (var i = 0; i < items.length; i++) {
if (i >= (page - 1) * pageSize && i < page * pageSize) {
items[i].style.display = 'block';
} else {
items[i].style.display = 'none';
}
}
}
showPage();
prevBtn.addEventListener('click', function() {
if (page > 1) {
page--;
showPage();
}
});
nextBtn.addEventListener('click', function() {
if (page < Math.ceil(items.length / pageSize)) {
page++;
showPage();
}
});
```
这段代码首先选择所有的`.item`元素和`.prev`、`.next`按钮,然后定义了`page`和`pageSize`变量,分别表示当前页数和每页显示的个数。`showPage`函数根据当前的`page`和`pageSize`来显示或隐藏对应的元素。`prevBtn`和`nextBtn`按钮分别绑定了点击事件,点击后会更新`page`变量并调用`showPage`函数重新显示元素。
在这个示例中,每页显示5个元素,可以通过修改`pageSize`变量来修改每页显示的个数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<html> <head> <title>人员管理界面</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script> </head> <body> 员工列表 —— 显示所有员工信息 ID 姓名 电话号 地址 职位 职位编号 状态 证件照 <c:forEach items="${employees}" var="employees"> ${employees.id} ${employees.name} ${employees.phonenumber} ${employees.address} ${employees.job} ${employees.jobid} ${employees.state} ![]()
更改 | 删除 </c:forEach> </body> </html>给这个界面的表格实现一个分页的功能,每页的最大数目为5
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)