时间戳

首页 > 解决方案 > 仅对数组 javascript 中的值进行分页

javascript - 仅对数组 javascript 中的值进行分页

问题描述

只是我做了基本的分页现在我只需要从一个可以循环显示的 items_list 的数组列表中显示分页号。

到目前为止，我正在增加和减少从 innerHTML 获取它的事物数量，但我只需要从数组中循环它。

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>

标签： javascripthtmlcss

解决方案

如果它只是你想要的圆形东西，那么你可以使用modulo下面的属性。

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;
    })

更新代码以包含数组中的值

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) => {
      let x = item.innerHTML;
      item.innerHTML = items_list[((--x-1 + items_list.length)%items_list.length)];
  })
}

function next(){
  var elements = document.querySelectorAll("ul.nav > li.myli");

  elements.forEach(item => {
      let x = item.innerHTML;
      item.innerHTML = items_list[((++x-1)%items_list.length)];
  })
}

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>

推荐阅读