0

tengo la variable imágenes que cuando la muestro por consola sale asi:

[
 0:htpps://imagen1.jpg
 1:htpps://imagen2.jpg
 2:htpps://imagen2.jpg
]

entonces para mostrar una imagen lo hago de la siguiente manera

var $thumbNav = $productImagesContainer.find('.thumbs-container');
$thumbNav.append('<img src="' + maleImages[0] + '">');

la imagen me llega de forma correcta.

Ahora lo que quiero hacer es traer todas la imágenes, algo asi:

$thumbNav.append('<img src="' + maleImages[0] + '">');
$thumbNav.append('<img src="' + maleImages[1] + '">');
$thumbNav.append('<img src="' + maleImages[2] + '">');

pero si lo hago así, cuando se ingrese una nueva imagen no va aparecer.

Cual se seria la forma de hacerlo?

Gracias

1
  • 1
    Haz un foreach para recorrer maleImages... cada vez que haya una imagen agregas un append. Si eso es a lo que te refieres. Commented el 8 ene. 2020 a las 23:15

2 respuestas 2

3

Para realizar una acción parecida varias veces tendrás que hacer algún tipo de bucle. Para este ejemplo vamos a usar un bucle for normal, pero lo podrías hacer igualmente con forEach como te han indicado en el comentario.

Cuando haces un bucle for, lo que tienes que identificar, es:

  • Cual es la parte "igual" que tengo que repetir siempre
  • Cuál es la parte "diferente" que tengo que cambiar a cada iteración.

En tu caso la parte diferente es el número de la posición del array: maleImages[0], maleImages[1], etc. Pero el resto de la sentencia ($thumbNav.append...) es siempre lo mismo.

Una vez identificadas esas dos partes, tienes que pensar

  • Desde dónde inicia la parte "diferente"
  • Cuándo acaba esa parte
  • De cuánto en cuanto se incrementa tus itertaciones.

En tu caso siempre se inicia desde cero, y acaba en tanto lo largo que sea tu array menos uno. Por ejemplo para tu array de 3 elementos acabas en el 2 (por que vas del 0 al 2), si tuviera 10 elementos acabarías en el 9. Por último sabes que ese valor se incrementa de uno en uno, ya que empiezas en 0, después sigues con el 1, el 2, etc.

Con todo esto ya puedes montar tu bucle:

for (var i = 0; i < maleImages.length; i++) {
   $thumbNav.append('<img src="' + maleImages[i] + '">');
}

¿Qué significa todo esto?. Primero declaras un bucle for. Inicialmente creas una variable de nombre i que valdrá 0 al principio. A cada iteración irá variando de 0, 1, 2, etc. Ese es el valor que luego sustituirás al hacer maleImages[i] en la siguiente línea.

La segunda parte del for indica cuál es la condición de parada del bucle para que no se ejecute indefinidamente. En tu caso se ejecutará mientras que i sea menor que la longitud del array. Por lo que si tu array tiene 3 elementos e i tiene el valor 2 te dejará continuar, pero cuando valga 3 parará ya que 3 no es menor que 3 (es igual vaya).

La última parte del for es la que va cambiando el valor de i. Como hacemos incrementos de 1 en uno usamos i++ que sirve para sumar 1 al valor actual de i.

5
  • Que respuesta mas completa, entendí bien gracias. Commented el 8 ene. 2020 a las 23:36
  • 2
    Cabe mencionar que si el OP utiliza esta línea $thumbNav.append('<img src="' + maleImages[i] + '">'); para agregar las imágenes "dinamicamente" le aparecerá texto en vez de una etiqueta img. Commented el 8 ene. 2020 a las 23:47
  • Una excelente respuesta, muy completa @ordago. Commented el 8 ene. 2020 a las 23:49
  • 1
    @VickMuñoz Llevas toda la razón, me centré tanto en la parte del for, que me olvidé de si el resto funcionaba :)
    – ordago
    Commented el 8 ene. 2020 a las 23:54
  • 1
    @ordago Suele pasar, aunque no se le va el merito a tu respuesta bien explicada! :D Commented el 9 ene. 2020 a las 0:00
1

Para hacer dicha tarea, necesitas usar un bucle para recorrer tu variable, en este caso viendo la forma en que tienes tu variable "imagenes" estaríamos hablando de un json, aunque faltan las comillas dobles "" tanto en la clave como en el valor, modifique un poco tu código con el fin de representarlo para que puedas observar el funcionamiento, así que selecciono el div donde vas a agregar las imágenes, después como estamos usando un json tenemos que saber cuántos pares de clave-valor tenemos para saber el tamaño usamos Object.keys, después no basta con agregar .append('<img ...>') ya que lo agregará como texto, tienes que crear el elemento img con createElement una vez creado le pasamos al atributo src el recorrido de la variable maleImages[i], al final imprimí en consola para que observes el atributo de las imágenes, espero te sirva, cualquier duda hazla saber.

let maleImages = {
 "0":"htpps://imagen1.jpg",
 "1":"htpps://imagen2.jpg",
 "2":"htpps://imagen2.jpg"
};


var thumbNav = document.querySelector('.thumbs-container');


for(let i = 0; i < Object.keys(maleImages).length; i++){

let img = document.createElement('img');

img.src = maleImages[i];

thumbNav.append(img);

}

console.log(document.querySelectorAll('img')[0].src);
console.log(document.querySelectorAll('img')[1].src);
console.log(document.querySelectorAll('img')[2].src);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="thumbs-container">

</div>

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.