Quiero implementar la paginación con JS que se basa en contar elementos de la misma clase y luego cambiar su propiedad de estilo para mostrar/ocultar elementos en una página.
<style> .block{ display: none; } </style> <div class='block'> <h1>BLOCK1</h1> </div> <div class='block'> <h1>BLOCK2</h1> </div> <div class='block'> <h1>BLOCK3</h1> </div> <div class='block'> <h1>BLOCK4</h1> </div> <div class='block'> <h1>BLOCK5</h1> </div> <script> let num_elements = document.getElementsByClassName("block").length; console.log(num_elements); let current_page = 0; let num_page_items = 2; let num_pages = num_elements/num_page_items; console.log(num_pages) function next_two(){ for (let i = 0; i < num_page_items; i++) { document.getElementsByClassName("block")[i].style.display='block'; } // how to show the next two? } function previous_two(){// cant figure out} next_two(); </script> En este momento tengo un montón de divs de block de clase que tienen su propiedad de visualización CSS establecida en none . Luego tengo un JS que obtiene la cantidad de elementos del block de clase, calcula la cantidad de páginas y una función next_two() que muestra dos elementos en la página al cambiar la propiedad de visualización de CSS a block . ¿Cómo puedo mostrar la siguiente 'página' (dos elementos) y la 'página' anterior?
debe guardar el número de página actual, cambiarlo cuando presione siguiente o anterior y luego recorrer la lista y habilitar los elementos que están en esa página. (Tenga en cuenta que esta no es la mejor manera de hacer la paginación y hay muchas bibliotecas js que lo habilitan, un ejemplo: https://pagination.js.org/ )
de cualquier manera, la solución para la pregunta que definiste:
<html> <head> <style> .pageBlock {} .showPage { display: block; } .dontShowPage { display: none; } </style> <script> var blockElements; var num_elements; var current_page; var num_page_items; var num_pages; window.onload = init; function init() { blockElements = document.getElementsByClassName("pageBlock") num_elements = blockElements.length; console.log(num_elements); current_page = 0; num_page_items = 2; num_pages = Math.floor( num_elements/ num_page_items); console.log(num_pages); } function next_two() { console.log('next two'); current_page++ if (current_page > num_pages) { current_page = num_pages; } updatePageElements(); } function previous_two() { console.log('prev two'); current_page-- if (current_page < 0) { current_page = 0; } updatePageElements(); } function updatePageElements() { for (let i = 0; i < num_elements; i++) { //you can use the value of i itself but then you dont controll the order directlly if ( Number.parseInt(blockElements[i].id) < num_page_items * current_page || Number.parseInt(blockElements[i].id) >= num_page_items * (current_page + 1)) { blockElements[i].classList.replace('showPage', 'dontShowPage'); } else { blockElements[i].classList.replace('dontShowPage', 'showPage'); } } } </script> </head> <body> <div id="0" class="pageBlock showPage"> <h1>BLOCK1</h1> </div> <div id="1" class="pageBlock showPage"> <h1>BLOCK2</h1> </div> <div id="2" class="pageBlock dontShowPage"> <h1>BLOCK3</h1> </div> <div id="3" class="pageBlock dontShowPage"> <h1>BLOCK4</h1> </div> <div id="4" class="pageBlock dontShowPage"> <h1>BLOCK5</h1> </div> <button onclick="next_two()">next_two</button> <button onclick="previous_two()">previous_two</button> </body> </html>