• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

135
Views
¿Cómo muestro uno de los divs secuencialmente cuando se actualiza la página?

¿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?

about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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.

about 3 years ago · Juan Pablo Isaza Report

0

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() }); }
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error