この「next」、「previous」スクリプトを改善して、少なくとも3になるようにしてください

Question

アイテムを含む列を作成しようとしていますが、この列内では「next」または「prev」ページに移動できます。

これは正常に動作します。

は今ここに私の質問は、あなたがページをスクロールすることができるように、私は、さらに8ページまで作成したりするにはどうすればよい

？です。

私はこれで何かをしようとしていますが、私は何とかカントはここ

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

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

HTMLにそれを実装する私の現在の設定です

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

あなたは何かを行うことができますこのように：

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>