Разбить только значение из массива javascript - PullRequest
Новая
       835

Разбить только значение из массива javascript

0 голосов
/ 07 августа 2020

только что я сделал базовую c разбиение на страницы, теперь мне нужно показать номер разбивки на страницы только из списка массивов, который является items_list, который может отображаться циклически.

На данный момент я увеличиваю и уменьшаю номер объекта получение его из внутреннего HTML, но мне нужно только распространить его из массива. 

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>

1 Ответ

2 голосов
/ 07 августа 2020

Если вам нужен только круговой элемент, вы можете использовать свойства 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...