Tengo una cuadrícula de imágenes de productos y me gustaría que todas las imágenes con la misma ID se hicieran visibles después de 5 segundos con javascript. De momento solo funciona con la primera imagen mientras que las demás quedan ocultas y todas tienen el mismo id. Desearía que funcionara para todas las imágenes con la misma ID.
/ ejemplo html /
<div class"product1 image"> <img src="image1.jpg" id="myid"> </div> <div class"product2 image"> <img src="image2.jpg" id="myid"> </div>/ ejemplo css /
.image { visibility: hidden; }/ ejemplo js /
<script type="text/javascript"> function change () { var image = document.getElementById ("myid"); image.style.visibility = "visible"; } setTimeout ("change ();", 5000); </script>Solo debe tener un elemento con una identificación particular en su página. getElementById devuelve un solo elemento, por lo que es probable que solo encuentre el primer elemento en la pantalla.
Puede darles una clase css con el mismo nombre o usar un atributo data-* para identificarlos, por ejemplo
<img src="image2.jpg" data-image-group="bob" />Y esto devolvería todos los elementos que coincidan con ese nombre de grupo:
let matchedImages = document.querySelectorAll("[data-image-group='bob']") matchedImages .forEach(function(image) { image.style.visibility = "visible"; });Alternativamente (y este podría ser el mejor enfoque), considere un enfoque CSS puro para lidiar con este problema de visualización y use una animación para ocultarlos inicialmente y luego desaparecer. Se puede encontrar una muestra de esto en esta respuesta:
Uso de CSS para un efecto de aparición gradual en la carga de la página
Algunos problemas con su código. Primero te estás perdiendo = al establecer la clase de div . Entonces los id s deben ser únicos. Probablemente la solución más fácil después de solucionar los problemas menores es usar querySelectorAll y query img que son elementos secundarios de la clase .image que ya está configurada.
function change () { var images = document.querySelectorAll(".image img"); images.forEach(image=>image.style.visibility = "visible"); } setTimeout (change, 5000); .image { visibility: hidden; } img{ width: 50px; } <div class="product1 image"> <img src="https://logos-download.com/wp-content/uploads/2019/01/JavaScript_Logo.png"> </div> <div class="product2 image"> <img src="https://blog.jeremylikness.com/blog/2019-03-05_typescript-for-javascript-developers-by-refactoring-part-1-of-2/images/1.jpeg"> </div>El identificador de identificación debe ser único y aplicarse en un solo elemento. No puede especificar el mismo valor de id para más de 1 elemento. Puede, pero no funcionaría y es una mala práctica de HTML. Debe usar clases para tales casos. Puede dar un nombre de clase de image para todos sus elementos y luego seleccionarlos por nombre de clase usando JavaScript:
<div class="product1 image"> <img src="image1.jpg" class="image"> </div> <div class="product2 image"> <img src="image2.jpg" class="image"> </div> <script type="text/javascript"> function change () { var images = document.getElementsByClassName("myid"); images.forEach(element => element.style.visibility = "visible"); } setTimeout ("change ();", 5000); </script>