¿Cómo muestro uno de los divs secuencialmente cuando se actualiza la página? por ejemplo, div 1 aparecerá cuando se abra la página, y cuando se actualice la página, div 2 cambiará a 3 - 4 -5 en la próxima actualización, y cuando la cola finalice, volverá al principio.
Ejemplo en el que estoy trabajando:
$(document).ready(function() { let divs = document.querySelectorAll(".category"); for (let index = 0; index < divs.length; index++) { $(divs[index]).show() } }); .category { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="category">1</div> <div class="category">2</div> <div class="category">3</div> <div class="category">4</div> <div class="category">5</div>Aquí se muestra todo cuando se carga la página. ¿Como puedo resolver esto?
El problema es que configuró todas las inmersiones para show() en un bucle. Si desea actualizar el visible para cada visita a la página, deberá almacenar el elemento actualmente visible, listo para que se lea la próxima vez que se visite la página. Sugeriría usar localStorage para esto:
jQuery($ => { let $divs = $(".category"); let lastShown = localStorage.getItem('lastCategoryIndex') || -1; $divs.eq(++lastShown % $divs.length).show(); localStorage.setItem('lastCategoryIndex', lastShown) }); .category { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="category">1</div> <div class="category">2</div> <div class="category">3</div> <div class="category">4</div> <div class="category">5</div>Aquí hay un ejemplo de trabajo en un jsFiddle , ya que los fragmentos SO están en un espacio aislado y no permiten el acceso al almacenamiento local.
pruebe esta solución javascript visite este enlace para la demostración JsFiddle
const countRefresh = localStorage.getItem('refreshTurn'); if(countRefresh != null){ foo(parseInt(countRefresh) - 1); switch(countRefresh) { case "1": localStorage.setItem('refreshTurn', '2'); break; case "2": localStorage.setItem('refreshTurn', '3'); break; case "3": localStorage.setItem('refreshTurn', '4'); break; case "4": localStorage.setItem('refreshTurn', '5'); break; case "5": localStorage.setItem('refreshTurn', '1'); break; default: localStorage.setItem('refreshTurn', '1'); } } else { foo(0); localStorage.setItem('refreshTurn', '1'); } function foo(index){ $(document).ready(function () { let divs = document.querySelectorAll(".category"); console.log(index); $(divs[index]).show() }); }