Проблемы с отображением предыдущего и следующего контента - PullRequest
Новая
       3

Проблемы с отображением предыдущего и следующего контента

0 голосов
/ 11 июля 2020

Мне нужна помощь в моем скрипте

Я пытаюсь сделать предыдущий и следующий

мне нужно, чтобы я хотел ограничить контент. 5 div только внутри тега ul

, если он достигает 5 div, он перемещает другие к следующему

, например, я хочу ограничить 5 div на шоу, чтобы перейти к следующему div или контенту

поэтому основной момент - показать содержимое внутри тега ul, ограниченное только 5 div, а затем показать другие следующие 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">


</head>
<body>
<div class="row">
 <ul id="1">
 <li>
 
<div>    
<p>This is the text 1</p>
</div>

<div>
<p>This is the text 2</p>
</div>

<div>
<p>This is the text 3</p>
</div>

<div>
<p>This is the text 4</p>
</div>

<div>
<p>This is the text 5</p>
</div>

<div>
<p>This is the text 6</p>
</div>

<div>
<p>This is the text 7</p>
</div>

<div>
<p>This is the text 8</p>
</div>
 
 </li>

<div class="bottom">
    <p>showing 1 of 1</p>
    <a href="#" id="prev">prev</a>
    <a href="#" id="next">next</a>
</div>

                                                        
</ul>
                                

</div>

<script>

var current = 1;

// function to go to previous
var prev = function() {
    current -= 1;
    if (current < 1) current = 1; // can't go too far previous
    showContent();
};

// function to go next
var next = function() {
    current += 1; 
    showContent(); //can't go too far next
};

// Update what content we are showing based on the "current" index
var showContent = function() {
    var display;
};

// bind the prev and next function to the links 
document.getElementById('prev').onclick = prev;
document.getElementById('next').onclick = next;

// Setup the initial state of the content
showContent();
</script>
</body>
</html>

1 Ответ

0 голосов
/ 12 июля 2020

Я только что придумал это из вашего кода, попробуйте и дайте мне знать, хорошо ли это для вас. Очевидно, что для этого нужно много улучшений, но вы упустили некоторые важные вещи, связанные с разбивкой на страницы, например, сколько вы хотите видеть на странице itemsPerPage, и расчет количества страниц numberOfPages, чтобы вы могли ограничить переход по следующей ссылке . И вычитание элементов, которые вы хотите видеть на странице, выполняется с помощью Array.slice(startIndex, endIndex), а затем получение разницы между всеми элементами в ul и нарезанной части, а затем управление либо показывает их, либо нет, добавляя и удаляя предопределенные дополнительные css классы .show и .hide. Наконец, добавление двух элементов span (.current-page и number-of-pages) для визуализации информации о разбиении на страницы. 

.hide{
  display: none;
}

.show{
  display: list-item;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
  </head>

  <body>
    <div class="row">
      <ul id="1">
        <li>
          <p>This is the text 1</p>
        </li>
        <li>
          <p>This is the text 2</p>
        </li>
        <li>
          <p>This is the text 3</p>
        </li>
        <li>
          <p>This is the text 4</p>
        </li>
        <li>
          <p>This is the text 5</p>
        </li>
        <li>
          <p>This is the text 6</p>
        </li>
        <li>
          <p>This is the text 7</p>
        </li>
        <li>
          <p>This is the text 8</p>
        </li>
        <li>
          <p>This is the text 9</p>
        </li>
        <li>
          <p>This is the text 10</p>
        </li>
        <li>
          <p>This is the text 11</p>
        </li>
        <li>
          <p>This is the text 12</p>
        </li>
        <li>
          <p>This is the text 13</p>
        </li>
        <li>
          <p>This is the text 14</p>
        </li>
        <li>
          <p>This is the text 15</p>
        </li>
        <li>
          <p>This is the text 16</p>
        </li>
        
      </ul>
      <div class="bottom">
      <p>showing <span class="current-page"></span> of <span class="number-of-pages"></span></p>
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
      </div>
    </div>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        var lis = document.querySelectorAll("ul li");
        var itemsPerPage = 5;
        var numberOfPages = Math.ceil(lis.length/itemsPerPage);
        var current = 0;
        
        document.querySelector(".number-of-pages").innerHTML = numberOfPages;
        var cp = document.querySelector(".current-page");
        cp.innerHTML = current+1;
        
        // function to go to previous
        var prev = function() {
            if (current === 0){return;} // can't go too far previous
          current--;
          var res = Array.from(lis).slice((current*itemsPerPage), (current+1)*itemsPerPage);
            res.forEach(e=>{
            e.classList.add("show");
            e.classList.remove("hide");
          });
          Array.from(lis).filter(e=>!Array.from(res).includes(e)).forEach(e=>{
            e.classList.add("hide");
            e.classList.remove("show");
          });
          cp.innerHTML = current+1;
        };

        // function to go next
        var next = function() {
            if (current+1 === numberOfPages){return;} // can't go too far previous
          current++;
          var res = Array.from(lis).slice(current*itemsPerPage, (current+1)*itemsPerPage);
          res.forEach(e=>{
            e.classList.add("show");
            e.classList.remove("hide");
          });
          Array.from(lis).filter(e=>!Array.from(res).includes(e)).forEach(e=>{
            e.classList.add("hide");
            e.classList.remove("show");
          });
          cp.innerHTML = current+1;
        };

        // Update what content we are showing based on the "current" index
        var showContent = function() {
          var res = Array.from(lis).slice(current*itemsPerPage, (current+1)*itemsPerPage);
          res.forEach(e=>{
            e.classList.add("show");
          });
          Array.from(lis).filter(e=>!Array.from(res).includes(e)).forEach(e=>{
            e.classList.add("hide");
          });
        };

        // bind the prev and next function to the links 
        document.getElementById('prev').onclick = prev;
        document.getElementById('next').onclick = next;

        // Setup the initial state of the content
        showContent();
      });

    </script>
  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...