Buscar temas sin respuesta | Ver temas activos Fecha actual 16 Dic 2017 16:01

Reglas del Foro


Es un foro abierto pero moderado, es decir que cualquier mensaje pasa por el moderador que borrará de inmediato todo lo que suene a spam.



Responder al tema  [ 12 mensajes ]  Ir a página 1, 2  Siguiente
 Insertar un array dentro de otro y mostrar su contenido 
Autor Mensaje
Hola, a ver si me podeis echar una mano.
Tengo un array que a través de un innerHTML me crea unos div y me muestra una serie de datos, en uno de esos div me tiene que mostrar
unas fotos que las tiene que coger de otro array, estas fotos se tienen que corresponder, en el ejemplo, con la fruta que se está mostrando
en ese momento, o sea, sería sustituir las fotos del div miniaturas por las contenidas en el array.
El segundo elemento en el array nombreFrutas, lógicamente es el nombre de la imagen principal

Código:
var nombreFrutas = [["pera","f_pera1"],
                ["manzana","f_manzana1"],
                ["melocoton","f_melocoton1"],
                ["naranja","f_naranja1"],
                ["mandarina","f_mandarina1"],
                ["Melon","f_melon1"]];

var f_pera = new Array();
f_pera = [["f_pera1"],
["f_pera2"],
["f_pera3"],
["f_pera4"],
["f_pera5"],
["f_pera6"],
["f_pera7"],
["f_pera8"]];

var f_manzana = new Array();
f_manzana = [["f_manzana1"],
["f_manzana2"],
["f_manzana3"],
["f_manzana4"],
["f_manzana5"],
["f_manzana6"]];   

var f_melocoton = new Array();
f_melocoton = [["f_melocoton1"],
["f_melocoton1"],
["f_melocoton1"],
["f_melocoton1"]];   


         document.getElementById("lFrutas").innerHTML += "<div class=frutas><div class=cabecera> \
    <div class=nombre>" + array[i][0] + "</div></div> \
    <div class=columnaImagenes><div class=imagenPrincipal>
   <img src="images/" + array[i][1] + ".jpg"></div> \
    <div class=miniaturas> \
   <img src=images/f_pera1.jpg> \      
   <img src=images/f_pera2.jpg> \      
    <img src=images/f_pera3.jpg> \
    <img src=images/f_pera4.jpg> \
    <img src=images/f_pera5.jpg> \
   <img src=images/f_pera6.jpg> \
    </div></div> \
   <div class=columnaDescripcion><div class=descripcion>" + array[i][3] + "</div> \
   </div></div>";   
   }



08 Nov 2013 15:15
Site Admin

Registrado: 14 Sep 2012 07:50
Mensajes: 36
Así de entrada veo un problema con las comillas al insertar en el innerHTML, usa esto
'<div class=frutas><div class=cabecera><div class=nombre>' + nombreFrutas[i][0] + '</div></div><div class=columnaImagenes><div class=imagenPrincipal><img src="images/' + nombreFrutas[i][1] + '.jpg"></div><div class=miniaturas><img src=images/f_pera1.jpg><img src=images/f_pera2.jpg><img src="images/f_pera3.jpg"><img src="images/f_pera4.jpg"><img src="images/f_pera5.jpg"><img src="images/f_pera6.jpg"></div></div><div class=columnaDescripcion><div class=descripcion>' + nombreFrutas[i][3] + '</div></div></div>';

Tenías también puesto array, supongo que será nom breFrutas, sino pon el que corresponda pero al colocar array te da un error de variable no definida y no muestra nada.

Saludos


09 Nov 2013 13:13
Perfil WWW
En cuanto al nombre del array lo tengo puesto así porque lo tengo declarado de esta manera.
Código:
var nombreFrutas = new Array();
nombreFrutas = [["pera","f_pera1"],
["Melon","f_melon1"]];

por eso en el innerHTML ya no utilizo nombreFruta y en su lugar pongo array y todo funciona perfectamente y la solución que tu me propones es la misma que estoy utilizando ahora mismo y no es eso lo que yo busco.

Lo que yo estoy buscando, es que todas las imagenes que se muestran en el div miniaturas salgan de un array y no meterlas manualmente, y lógicamente tienen que salir del array que contenga las fotos que se corresponde con el array[i][0] por eso he creado un array de fotos por cada objeto que hay en el array nombreFrutas, de esa forma si yo quiero que me muestre la fruta melocoton pondria [2][0] y me mostraría todos los elementos correspondientes a ese objeto incluyendo sus fotos, que me las mostraría en el div miniaturas y sacadas de su array correspondiente, que en este caso sería este.
Código:
 
var f_melocoton = new Array();
f_melocoton = [["f_melocoton1"],
["f_melocoton1"],
["f_melocoton1"],
["f_melocoton1"]];


Saludos


10 Nov 2013 13:37
Site Admin

Registrado: 14 Sep 2012 07:50
Mensajes: 36
A ver si lo entendí:
Tu quieres que el bloque DIV se llene a partir del array. Y supongo que quieres un bloque div para cada fruta ¿es así?
Puedes usar la función eval
He cambiado un poco el código por claridad (eso espero)
Si go obteniedo error si uso array como variable, así que uso nombreFrutas

nFruta = nombreFrutas[i][0];
iFruta = "f_"+nFruta;
Contenido = '<div class="frutas"><div class="cabecera"><div class="nombre">' + nFruta + '</div></div>';
Contenido += '<div class="columnaImagenes"><div class="imagenPrincipal"><img src="images/' + nombreFrutas[i][1] + '.jpg">'+nombreFrutas[i][1]+'</div><div class=miniaturas>';
numImgs = eval(iFruta).length;
for (j=0; j<= numImgs; j++)
{
Contenido += '<img src="images/'+ eval(iFruta+'['+j+']')+'.jpg" alt="'+iFruta+j+'">';
}
Contenido += '</div></div><div class=columnaDescripcion><div class=descripcion>' + nombreFrutas[i][3] + '</div></div></div>';
document.getElementById("Frutas").innerHTML += Contenido;

Esto lo tengo dentro de una función con un argumento que es el número de la fruta que voy a mostrar.
Si quieres mostrar todas no uses argumento y coloca todo dentro de un bucle for. Iría delante de nFruta y sería de la forma
for(i=0; i <= nombreFrutas.length; i++)
{el código que he puesto arriba}

En esta forma el bloque DIV miniaturas se llena con los datos sacados del array nombreFruts y los f_pera, f_manzana....

¿Era esto?
Saludos


11 Nov 2013 20:23
Perfil WWW
Si, eso era lo que estaba buscando, al principio me salían las 8 imagenes
["f_pera8"]]; y un cartelito debajo de las fotos con el texto f_pera8
así que he modificado este for
for (j=0; j<= numImgs; j++)
le he quitado el signo igual y lo he dejado así
for (j=0; j< numImgs; j++)
y ya ha desaparecido el cartelito así que ya sale bien, supongo que sería porque el array empieza a contar desde 0 y las fotos son 8 empezando a contar desde el 1 así que me muestra una más, pero el texto, no la foto.

Ahora en esta línea, donde van las fotos del array fotos
Contenido += '<img src="images/'+ eval(iFruta+'['+j+']')+'.jpg" alt="'+iFruta+j+'">';
necesito meter esta función para que al pulsar sobre cualquier miniatura me la ejecute y no soy capaz, no se si es un problema de las comillas, que no las pongo bien
onclick=document.getElementById('imgCambiaFoto').src=this.src;

Lo que necesito es esto, que es como lo tenia antes de utilizar el array para las miniaturas
<img src=images/f_pera8.jpg onclick=document.getElementById('imgCambiaFoto').src=this.src;


12 Nov 2013 01:32
Por fin he conseguido incluir el evento onclick, visto así es muy fácil, pero el otro día no hubo manera, siempre me daba error, sería algún problema de comillas como te comenté, te paso el código para que veas como ha quedado.
Código:
Contenido += '<img src="imagesInfor2/'+ eval(iFruta+'['+j+']')+'.jpg" alt="'+iFruta+j+'" title="'+titleTexto+'" onclick=document.getElementById("imgCambiaFrutas").src=this.src;>';

Seguramente el código este:
Código:
document.getElementById("imgCambiaFrutas").src=this.src;>';

se pueda hacer de otra manera, con alguna función, pero lo he intentado y no lo he conseguido, pero como así funciona no me preocupa demasiado.

Lo que si necesito resolver y de ahí viene todo esto, es poder abrir la página donde se encuentran los arrays de frutas mostrando la fruta que yo quiera pinchando en los enlaces que hay en otra página.
Me explico
Tengo una página que se llama pruebas.html y otra que se llama arrayFrutas.html, que es donde se encuentran los arrays de frutas que hemos construido, en pruebas.html tengo 3 enlaces, y necesito que pinchando en ellos me abran la página de frutas, pero mostrándome la fruta correspondiente,
mostrarFrutas sería el nombre de la función.

Código:
 
<p><a href="javascript:mostrarFrutas('arrayFrutas','nombreFrutas[i][pera')">Pera</a></p>
<p><a href="javascript:mostrarFrutas('arrayFrutas','nombreFrutas[i][manzana')">Manzana</a></p>
<p><a href="javascript:mostrarFrutas('arrayFrutas','nombreFrutas[i][melocoton')">Melocoton</a></p>


Saludos


12 Nov 2013 11:19
Site Admin

Registrado: 14 Sep 2012 07:50
Mensajes: 36
Hola
Si, efectivamente el límite del bucle debe ser < tamaño del array porque se empieza a contar en 0.
Lo de mostrar una fruta según diga el enlace desde otra página lo consigues psando parámetros por la dirección URL.
En este caso es muy simple si solo necesitas un parámetro
En pruebas.htm colocas el enlace de la siguiente forma
arrayFrutas.html?manzana

En arrayFrutas extraes el valor del parámetro

var frutaMostrada = String( window.location.href ).split('?');

En frutas mostrada tienes el nombre de la fruta, buscas en el array el índice correspondiente a ese nombre y llamas a la función que tienes construida y que funciona
Eso si quieres usar nombres, si quieres colocar índices pues
arrayFrutas.html?1
índice = String( window.location.href ).split('?') ;

En cualquier caso tendrás que asegurarte que el nombre o el índice de la fruta es correcto, si no existe pues dar algún mensaje o lo que tu ya veas.

En lo de que si el código funciona pues bien... asegúrate que funciona en los tres grandes Chorme, Iexplorer y Mozilla. Que IExplore no es el mayoritario en la red y, aunque tienden a normalizarse, siguen existiendo diferencias.

Saludos


12 Nov 2013 19:04
Perfil WWW
El código este que me has pasado no me funciona, supongo que será porque no lo he utilizado correctamente
índice = String( window.location.href ).split('?') ;

Así que he utilizado este otro que si me funciona
indice = location.search.substr(1).split ('&');
var ini = indice;

He sustituido todos los indices [i] de la página por la variable [ini] cuyo valor lo recojo del enlace de la otra página (pruebas.html) y funciona.
<a href="arrayFrutas.html?0" target="_new">
Utilizo el indice, aunque yo preferiría utilizar el nombre, ya que el objeto no va a estar siempre en la misma posición y por tanto su índice va a variar, pero no he conseguido que con el nombre me funcione.

Saludos


14 Nov 2013 01:18
Site Admin

Registrado: 14 Sep 2012 07:50
Mensajes: 36
Hola
perdona, te puse el código mal
var src = String( window.location.href ).split('?');

src es una matriz con el url y el valor detrás de ? (puedes usar ? como separador o cualquier otro como el que indicas, & o #... a tu gusto)
El parámetro que va después del separador (? o el que uses) en la url está en src[1]

O sea, si el enlace es http://sitio.com/frutas.htm?manzana

Pues src[1] contiene la palabra manzana.

Una vez has hecho esto llamas a la función que rellena el div con este parámetro (src[1]), osea, escribeDiv(src[1])

Y en la función haces un recorrido por el array con nombres hasta encontrar el que le pasas y ya tienes el índice

escribeDiv(nombre)
Aquí describes los arrays y demás
i=0;
while(nombre != nombreFrutas[i][0])
{
i++
}
Ya tienes el vaor de i (el índice) Y ahora pasarías a rellenar el div, ya tienes el índice de la fruta que quieres mostrar.

Y creo que con esto tienes lo que quieres, podrías refinarlo un poco por ejempo al buscar el nombre de la fruta, para que coincida mayúsculas con minúsculas si te viene bien...

Saludos


14 Nov 2013 02:32
Perfil WWW
Ya me funciona todo perfectamente, ya he creado la función para utilizar el nombre de la fruta en vez del indice, puesto que la primera opción es más versátil, la posición de una fruta determinada puede variar, hoy puede estar en el primer lugar y mañana en el tercero, pero su nombre no.
Y por último quería que me aclararas una cosa, como información, ya que este tema es nuevo para mí, que diferencia hay entre estos dos códigos, el src y el search, porque en mi caso funcionan los dos, de hecho como el src no me fucionaba he estado utilizando el otro, pero ahora ya si utilizo el src porque es el que tu me has indicado.

var src = String( window.location.href ).split('?');
location.search.substr(1).split ('?');

Saludos


15 Nov 2013 09:57
Mostrar mensajes previos:  Ordenar por  
Responder al tema   [ 12 mensajes ]  Ir a página 1, 2  Siguiente

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado


No puede abrir nuevos temas en este Foro
No puede responder a temas en este Foro
No puede editar sus mensajes en este Foro
No puede borrar sus mensajes en este Foro

Buscar:
Saltar a:  
cron
Desarrollado por phpBB® Forum Software © phpBB Group
Designed by ST Software for PTF.
Traducción al español por Huan Manwë para phpBB-Es.COM