1

Ninguna de esta forma me parece la más eficiente: ¿cuál de estas formas es mejor o hay algo mejor?

Primera forma:

Problema: tengo que agregar una clase (none) en CSS.

Ventaja: el código Javascript es mejor, más fácil.

let button= document.querySelector(".button");
let item1= document.querySelector(".item1");
let item2= document.querySelector(".item2");

function mode(){
    item1.classList.toggle("none");
    item2.classList.toggle("none");
}
button.addEventListener("click", mode);
.button{
   position: relative;
}
.span{
   position: absolute;
   font-size: 24px;
   color: red;
}
.none{
   display: none;
}
    <button class="button">
      <span class="span">CLICK ME</span>
        <img class="item1" src="https://picsum.photos/200/200" alt="">
        <img class="item2 none" src="https://picsum.photos/250/200" alt="">
    </button>

Segunda forma:

Problema: el código Javascript se extiende.

Ventaja: todo lo hago con Javascript sin mezclarlo con CSS.

let button= document.querySelector(".button");
let item1= document.querySelector(".item1");
let item2= document.querySelector(".item2");
let contador=0;

item1.style.display="none";
function mode(){
    contador++;
    if(contador%2==0){
        item1.style.display="none";
        item2.style.display="block";
    }else{
        item1.style.display="block";
        item2.style.display="none";
    }
}
button.addEventListener("click", mode);
    .button{
   position: relative;
}
.span{
   position: absolute;
   font-size: 24px;
   color: red;
}
    <button class="button">
      <span class="span">CLICK ME</span>
        <img class="item1" src="https://picsum.photos/200/200" alt="">
        <img class="item2" src="https://picsum.photos/250/200" alt="">
    </button>

4
  • 1
    Al final también estás usando CSS en la segunda manera de hacerlo: HTMLElement.style. Te ahorras una clase, pero complicas el código. Por cierto, en vez de usar clases para identificar elementos del DOM, usa identificadores. Javascript definirá automáticamente una variable en el ámbito de window con su nombre y no necesitarás hacer uso de querySelector() ni getElementById(). el 25 feb. 2022 a las 23:32
  • 1
    Realmente la respuesta a tu pregunta es una preferencia personal. Cambiar entre dos imágenes de ninguna de las dos formas va a tener una repercusión en performace, así que elige la que más te guste. De hecho, puedes incluso hacerlo solo con css sin necesidad de javascript. Por otro lado, imagina que en lugar de querer cambiar entre dos imágenes, quieres cambiar entre 100 imágenes. Ninguno de los dos códigos escala para ello.
    – Jaime
    el 25 feb. 2022 a las 23:36
  • @OscarGarcia ¿a que te refieres con identificadores?, supongo que a id="";
    – kraud
    el 26 feb. 2022 a las 0:11
  • Así es. Es la manera más cómoda de localizar elementos del DOM sin necesidad de realizar llamadas a funciones de búsqueda. Por ejemplo, el valor de <input id="valor" value="5" /> puede ser obtenido mediante valor.value o window["valor"].value (la más indicada cuando el identificador tenga caracteres especiales como puntos, guiones, etc o cuando el identificador de búsqueda sea a su vez una variable) o window.valor.value. el 26 feb. 2022 a las 0:14

1 respuesta 1

4

Para mostrar y ocultar una imagen no necesitas ni tan siquiera Javascript. Puedes hacer exactamente lo mismo con solo CSS:

/* No mostramos:
- La casilla de verificación
- La primera imagen si está marcada la casilla.
- La segunda imagen si no lo está.
*/
.alternar > input,
.alternar > input:checked + img,
.alternar > input + img + img {
  display: none;
}

/* Invertimos la lógica. Mostramos:
- La primera imagen cuando no esté marcada la casilla.
- La segunda imagen cuando lo esté.
*/
.alternar > input + img,
.alternar > input:checked + img + img {
  display: block;
}

.alternar > span {
   position: absolute;
   font-size: 24px;
   color: red;
}
<label class="alternar">
  <span>CLICK ME</span><input type="checkbox" />
  <img src="https://picsum.photos/200/60?1" alt="Imagen 1" />
  <img src="https://picsum.photos/200/60?2" alt="Imagen 2" />
</label>
<label class="alternar">
  <span>CLICK ME</span><input type="checkbox" />
  <img src="https://picsum.photos/200/60?3" alt="Imagen 1" />
  <img src="https://picsum.photos/200/60?4" alt="Imagen 2" />
</label>
<label class="alternar">
  <span>CLICK ME</span><input type="checkbox" />
  <img src="https://picsum.photos/200/60?5" alt="Imagen 1" />
  <img src="https://picsum.photos/200/60?6" alt="Imagen 2" />
</label>
<label class="alternar">
  <span>CLICK ME</span><input type="checkbox" />
  <img src="https://picsum.photos/200/60?7" alt="Imagen 1" />
  <img src="https://picsum.photos/200/60?8" alt="Imagen 2" />
</label>

De esta manera tu código escala adecuadamente. El funcionamiento es independiente del número de elementos que crees en el documento que quieras que tengan el mismo comportamiento.

4
  • 1
    Solo lo pensaba aplicar a los iconos de modo oscuro y modo claro; y me apena un poco sobrecargar el HTML ; Gracias por tu respuesta!!!.
    – kraud
    el 26 feb. 2022 a las 0:18
  • Justo un selector de modo claro y modo oscuro son un ejemplo de un campo de selección. Si le pones un identificador al campo del formulario, por ejemplo <input type="checkbox" id="modo" />, podrás acceder al estado de la selección desde Javascript usando modo.checked, devolviendo un valor true cuando esté activado y false cuando no lo esté. el 26 feb. 2022 a las 0:31
  • si, ya lo estudie y es genial. una ultima pregunta; porque le pones este símbolo ? en los link de tu código como en: picsum.photos/200/60?5 Se nota que funciona; pero quiero saber de donde viene eso, donde aprendo sobre eso...
    – kraud
    el 26 feb. 2022 a las 18:51
  • Hola @kraud. Es por el sistema de caché del navegador. Si todos tienen la misma URL entonces puede asumir que es la imagen y no realizar una llamada HTTP por cada imagen para obtener X diferentes. Para forzar la llamada HTTP y saltarse la caché del navegador envío un parámetro GET diferente por cada petición, aunque el servidor remoto lo ignore completamente. el 26 feb. 2022 a las 20:31

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.