1

Quiero poder mostrar las imagenes que se encuentran ocultas una por una como está ahí pero sin necesidad de una id, quisiera poder hacer que se ejecuten usando la clase 'history' o de todos modos cualquier otra pero siendo clase y la misma para todas.

let historyElements= [ 'imagen1','imagen2','imagen3'];
for (let i=0;i < historyElements.length; i++) {
  setTimeout(openHistory,2000 * i,historyElements[i]);
}
function openHistory(historyName) {
  let x = document.getElementsByClassName("history");
  for (let i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  document.getElementById(historyName).style.display = "block";  
}
body{
margin: 0;
}
img{
width: 100%;
}
<img id="imagen1" class="history" src="https://www.wampstore.com/store/image/cache/data/Wamp/Products/Vallejo/Flat%20Red-900x900.jpg">

<img id="imagen2" class="history" src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-129-Purple_1400x.jpg?v=1464824795">

<img id="imagen3" class="history" src="https://www.wampstore.com/store/image/cache/data/Wamp/Products/Vallejo/Deep%20Sky%20Blue-900x900.jpg">

3
  • Hola, perdón, pero es media confusa tu consulta, puedes agregar un poco mas de descripción? Por lo que veo, el código que colocaste simula un efecto de carrusel en donde solo se muestra 1 imagen y oculta el resto, es asi? Commented el 19 jun. 2019 a las 3:44
  • Querés poder especificar cual mostrar ingresando un número por ejemplo? O querés que se oculten y muestren solas? Explicá un poco más como querés que funcione.
    – azeós
    Commented el 19 jun. 2019 a las 3:44
  • Todo como está ahí pero sin usar id
    – Header90
    Commented el 19 jun. 2019 a las 3:50

1 respuesta 1

1

Lo puedes resolver haciéndole un foreach a un querySelectorAll

const historyItems = document.querySelectorAll(".history");

historyItems.forEach(function(history) {
  setTimeout(function() {
    item.style.display = toggle === "show" ? "block" : "none";
  }, 2000 * index); 
});

documentación: https://www.w3schools.com/jsref/met_document_queryselectorall.asp

Tambien puedes crear tu propia funcion para ocultar o mostrar elementos.

function toggleElementByClass(selector, toggle) {
  const items = document.querySelectorAll(selector);

  items.forEach(function(item, index) {
    setTimeout(function() {
      item.style.display = toggle === "show" ? "block" : "none";
    }, 2000 * index); 
  });
}
// **EDIT** Agregue el setTimeOut para que se muestren una por una

//lo usarías de la siguiente manera

toggleElementByClass(".history", "show"); // para mostrar todos los elementos con clase history

toggleElementByClass(".history", "hide"); // para ocultar todos los elementos con clase history

EDIT2: Aquí te dejo un link en codepen de la demostración del código https://codepen.io/rtelenta/pen/ZdpMRJ

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.