Me gustaría mostrar todos los elementos dentro de cierta clase en una página web de acuerdo con el tiempo elegido escrito en la clase.
Por ejemplo:
class=".unhide15" debería mostrar el elemento después de 15 segundos.class=".unhide123" debería mostrar el elemento después de 123 segundos.Y así..
Llegué a este código a continuación (funciona) , pero todavía no puedo elegir el momento que quiero.
<style> .unhide15, .unhide30, .unhide60{ display:none; } </style> <script> setTimeout(function(){ [].forEach.call(document.querySelectorAll('.unhide15'), function (el) { el.style.display = 'block'; }); }, 15000); setTimeout(function(){ [].forEach.call(document.querySelectorAll('.unhide30'), function (el) { el.style.display = 'block'; }); }, 30000); setTimeout(function(){ [].forEach.call(document.querySelectorAll('.unhide60'), function (el) { el.style.display = 'block'; }); }, 60000); </script>¿Alguna idea sobre cómo hacer esto?
Usaría solo una clase... Junto con un atributo de datos para mantener el tiempo deseado.
document.querySelectorAll(".unhide").forEach(function (elem) { let delay = parseInt(elem.getAttribute("data-time")) * 1000; setTimeout(function () { elem.style.display = "block"; }, delay); }); .unhide{ display: none; } <div class="unhide" data-time="1">Hello!</div> <div class="unhide" data-time="3">Hello!</div> <div class="unhide" data-time="10">Hello!</div> <div class="unhide" data-time="12">Hello!</div>=== EDITAR
Como no puede agregar atributos de data- ... Puede tener una matriz (en el lado JS) para hacer lo mismo con los valores de tiempo. Solo asegúrate de tenerlos todos... Y en orden.
// Set a time array for each element (in order) let time_array = [ 1, 3, 10, 12 // seconds ]; document.querySelectorAll(".unhide").forEach(function (elem, index) { let delay = time_array[index] * 1000; setTimeout(function () { elem.style.display = "block"; }, delay); }); .unhide{ display: none; } <div class="unhide">Hello!</div> <div class="unhide">Hello!</div> <div class="unhide">Hello!</div> <div class="unhide">Hello!</div>