En primer lugar, un descargo de responsabilidad, no soy un desarrollador. Estoy a la mitad de The Odin Project y he cubierto algo de HTML y CSS, pero aún no he comenzado con JS. Para ayudarme con mi aprendizaje, he creado mi propio blog . Mi objetivo es que cada entrada del blog tenga su propia hoja de estilo (así con cada nueva entrada aprendo un poco más sobre CSS).
De todos modos, planeo escribir una publicación sobre los beneficios de usar un eReader, específicamente el Kindle. He diseñado la página para que parezca un Kindle Oasis, y me gustaría que el lector pueda recorrer el contenido del artículo a través de los botones Siguiente/Anterior del Kindle, pero, como no soy un desarrollador, aquí es donde Estoy atascado. A través del desbordamiento de pila, logré agregar algunos JS que mostrarán la página 1, 2 y 3 a través de botones dedicados para cada elemento de inmersión, pero lo que realmente necesito es recorrer x número de páginas a través de los botones anterior/siguiente.
Esto es lo que tengo hasta ahora: https://codepen.io/dbssticky/pen/yLVoORO . Cualquier ayuda sería muy apreciada. Lo que debo hacer, por supuesto, es terminar el Proyecto Odin y encontrar una solución por mi cuenta, pero realmente me gustaría publicar este artículo de Kindle lo antes posible. De ahí mi más bien descarado pedido de ayuda.
Aquí está el JS que estoy usando actualmente:
function swapContent(id) { const main = document.getElementById("main_place"); const div = document.getElementById(id); const clone = div.cloneNode(true); while (main.firstChild) main.firstChild.remove(); main.appendChild(clone); }Independientemente de la solución que utilice para representar páginas y enlaces (enlaces y contenido codificados manualmente frente a almacenados externamente y generados automáticamente), una cosa es inevitable: ¡debe realizar un seguimiento de la página actual!
var currentPage = 0Luego, cada vez que hay un evento de cambio de página, actualiza esa variable.
Con la página actual en seguimiento, ahora puede realizar operaciones relativas a ella (por ejemplo, +1 o -1)
Sugeriría hacer una goToPage(page) que haga una lógica de paginación de alto nivel, y mantenga su función swapContent() específicamente para el acto literal de intercambiar contenido div. En el futuro, es posible que desee utilizar swapContent() para contenido que no sea de página, como mostrar una pantalla de "Bienvenida" o "Ayuda".
Ejemplo:
function goToPage(page) { // Update `currentPage` currentPage = page // ... other logic, like a tracking event or anything else you want you occur when pages change // Do the actual content swap, which could be your existing swapContent() swapContent('operation'+page) }Invocarías la función así:
goToPage(3) // Jump to a specific page goToPage(currentPage + 1) // Go to the next page goToPage(currentPage - 1) // Go to the prev pagePuede crear funciones auxiliares separadas como "ir a la siguiente página ()" si lo desea, pero asegúrese de comenzar primero con una función fundamental de cambio de página.
HTML
<button class="next-button" onclick="nextContent()"></button> <button class="previous-button" onclick="prevContent()"></button>JS
var pageid = 0; var maxpage = 3; function nextContent() { if(pageid == maxpage) return pageid++ swapContent(`operation${pageid}`) } function prevContent() { if(pageid == 1) return pageid-- swapContent(`operation${pageid}`) }puedes probar esto para cambiar entre páginas. Pero es posible que deba editar el método "swapContent" de manera más sensata.
Tiene la idea correcta y solo necesita algunos ajustes para obtener la funcionalidad anterior/siguiente.
Actualmente, sus ID de div siguen el formato operation1 , operation2 , etc. Dado que desea la funcionalidad anterior/siguiente, deberá cambiar su función de 'intercambio', que actualmente toma la identificación completa, para usar solo la parte numérica.
Agregue una nueva función que agregue el número a 'operación' en lugar de usar todo:
function goToPage(pageNumber){ const main = document.getElementById("main_place"); const div = document.getElementById("operation" + pageNumber); const clone = div.cloneNode(true); while (main.firstChild) main.firstChild.remove(); main.appendChild(clone); } Y luego cambie los botones de página 1/2/3 para usar goToPage(1) , goToPage(2) y así sucesivamente.
Ahora, para la funcionalidad anterior/siguiente, necesitará una forma de rastrear en qué página se encuentra, de modo que pueda averiguar qué página cargar.
Agregar una variable en la parte superior (funciones externas)
var currentPage = 0;Luego agregue una línea en su función goToPage para rastrear la página en la que se encuentra.
currentPage = pageNumber;Ahora que está rastreando, puede agregar una función anterior y siguiente.
function goNextPage(){ goToPage(currentPage-1); } function goPreviousPage(){ goToPage(currentPage+1); }Luego llámalo desde los botones anterior y siguiente.
<button onClick="goNextPage()" class="next-button"></button> <button onClick="goPreviousPage()" class="previous-button"></button>Aquí hay un codepen: https://codepen.io/srirachapen/pen/WNZOXQZ
Es básico y es posible que deba manejar cosas como ID de div inexistentes.