我只是做了基本的分页,现在我只需要从一个数组列表显示分页号,它是items_list,可以以循环的方式显示。
到现在为止,我正在增加和减少从innerHTML获取的东西数量,但是我只需要从数组中循环它。
null
var items_list=[1,2,3,4,5,6,7,8,9,10];
function prev(){
var elements = document.querySelectorAll("ul.nav > li.myli");
elements.forEach((item, i) => {
x = item.innerHTML;
item.innerHTML = --x;
})
}
function next(){
var elements = document.querySelectorAll("ul.nav > li.myli");
elements.forEach(item => {
x = item.innerHTML;
item.innerHTML = ++x;
})
}
function selectedItem(){
var elements = document.querySelectorAll("ul.nav > li.myli");
elements.forEach(item => {
item.addEventListener('click',(e)=>{
console.log(e.target.textContent);
let selected = e.target.textContent;
document.getElementById('selectedText').innerHTML = selected
}
)
});
}
<html>
<head>
<title>Pagination</title>
<script src="./index.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<tr style="min-height: 34px;">
<td>
<button id="leftscroll" class="mybut" onclick="prev()">prev</button>
</td>
<td>
<ul class="nav">
<li id="a" class="myli" onclick="selectedItem()">1</li>
<li id="b" class="myli" onclick="selectedItem()">2</li>
<li id="c" class="myli" onclick="selectedItem()">3</li>
<li id="d" class="myli" onclick="selectedItem()">4</li>
</ul>
</td>
<td>
<button id="rightscroll" class="mybut" onclick="next()">next</button>
</td>
</tr>
</table>
<div id="selectedText" style="display: block;"> -- </div>
</body>
</html>
null
如果您只需要循环,那么您可以使用module
属性,如下所示。
elements.forEach((item, i) => {
x = item.innerHTML;
item.innerHTML = (--x + items_list.length) % items_list.length;
})
elements.forEach(item => {
x = item.innerHTML;
item.innerHTML = (++x) % items_list.length;
})