Améliorez ce script "suivant", "précédent", afin qu'il puisse aller au moins 3

Question

J'essaie de créer une colonne contenant des éléments, dans cette colonne vous pouvez aller à la page "suivant" ou "prev".

Cela fonctionne très bien et rapidement!

Maintenant, voici ma question est

Comment puis-je créer jusqu'à la page 8 ou encore plus, pour que vous puissiez faire défiler les pages ?.

J'essaie quelque chose avec cela, mais je en quelque sorte ne peux pas le mettre en œuvre en html

function next() { 
    var nextUrl = "Page + (index+1)"; 
} 

function back() { 
    var prevUrl = "Page + (index-1)"; 
} 

Voici ma configuration actuelle

function show(elementID) { 
 
    var ele = document.getElementById(elementID); 
 
    if (!ele) { 
 
     alert("dit bestaat niet"); 
 
     return; 
 
    } 
 
    var pages = document.getElementsByClassName('page'); 
 
    for(var i = 0; i < pages.length; i++) { 
 
     pages[i].style.display = 'none'; 
 
    } 
 
    ele.style.display = 'block'; 
 
} 
 

 
       \t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="Page1" class="page" style=""> 
 
    page 1 
 
</div> 
 
<div id="Page2" class="page" style="display:none"> 
 
    page 2 
 
</div> 
 

 

 

 
<div class="column-wrapper"> 
 
    <div class="pagination paginatioon--full"> 
 
    <p> 
 
<span onclick="show('Page1');"> 
 
    <a href='#' class="pagination__prev">prev</a> 
 
</span> 
 
<span onclick="show('Page2');"> 
 
    <a href='#'class="pagination__next">next</a>   </span> 
 
    </p> 
 
    </div> 
 
</div>

Answer 1

Vous pouvez faire quelque chose comme ceci:

var currentPageId = 1; 
 
var totalpages = $('.page').length; 
 

 
$('.prev').click(function(e) { 
 
    if (currentPageId > 1) { 
 
    currentPageId--; 
 
    show('Page' + currentPageId); 
 
    } 
 
}); 
 
$('.next').click(function(e) { 
 
    if (currentPageId < totalpages) { 
 
    currentPageId++; 
 
    show('Page' + currentPageId); 
 
    } 
 
}); 
 

 

 

 
function show(elementID) { 
 
    var ele = document.getElementById(elementID); 
 
    if (!ele) { 
 
    alert("dit bestaat niet"); 
 
    return; 
 
    } 
 
    var pages = document.getElementsByClassName('page'); 
 
    for (var i = 0; i < pages.length; i++) { 
 
    pages[i].style.display = 'none'; 
 
    } 
 
    ele.style.display = 'block'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="Page1" class="page" style=""> 
 
    page 1 
 
</div> 
 
<div id="Page2" class="page" style="display:none"> 
 
    page 2 
 
</div> 
 
<div id="Page3" class="page" style="display:none"> 
 
    page 3 
 
</div> 
 

 
<div class="column-wrapper"> 
 
    <div class="pagination paginatioon--full"> 
 
    <p> 
 
     <span class='prev'> 
 
    <a href='#' class="pagination__prev">prev</a> 
 
</span> 
 
     <span class='next'> 
 
    <a href='#'class="pagination__next">next</a>   </span> 
 
    </p> 
 
    </div> 
 
</div>