提问者:小点点

仅分页数组javascript中的值


我只是做了基本的分页,现在我只需要从一个数组列表显示分页号,它是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


共1个答案

匿名用户

如果您只需要循环,那么您可以使用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;
    })