Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Detectar Click en una Galería de Fotos y Descripciones

JavaScript - Detectar Click en una Galería de Fotos y Descripciones

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Detectar Click en una Galería de Fotos y Descripciones

Publicado por Rubén (3 intervenciones) el 23/06/2016 05:16:54
Hola, no entiendo bien como son las reglas, espero hacerlo bien.
Tengo un problema que me quitó el sueño y el tiempo, necesito ayuda.
Es una galería de fotos con descripciones. Necesito identificar la descripción clickeada. Muestra bien todos los datos e incluso el item(pedido).

La galeria se genera a través de ayax con:

<div id="response-container"></div>

Hace cuatro dias con sus noches que no encuentro la función apropiada para detectar el click de la descripción. Esto es lo más cercano que encontré pero dice que todos los items fueron clickeados(en cada item pasa a la función cosa) y además cambie ("click",cosa(),false); por ("clickearseahora",cosa(),false); y hace lo mismo. ¿Error de la función
o error mio?

1
2
3
4
5
6
7
8
var ar_coins = document.getElementsByClassName('arti');
    for( xx=0;xx < ar_coins.length;xx++){
	ar_coins[xx].addEventListener("click",cosa(),false);
   }
 
function cosa(){
alert(ar_coins[xx].textContent + '   ' + xx);
}

Muchas gracias y espero encontrar la o las ayudas que me envíen, desde ya muy agradecido por el tiempo y la ayuda.

Saludos.

Rubén.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Detectar Click en una Galería de Fotos y Descripciones

Publicado por xve (2100 intervenciones) el 23/06/2016 08:25:05
Hola Ruben, la verdad es que sin ver el código HTML se hace difícil de decir...veo que generas un evento, pero se muy bien si lo generas bien... nos puedes mostrar el código HTML?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Detectar Click en una Galería de Fotos y Descripciones

Publicado por Rubén (3 intervenciones) el 23/06/2016 13:13:24
Hola, gracias por contestar, valoré la respuesta y no se porque se quedó en uno, aparece una ventana que no permite subirla.

Creo que esto es lo que pedís.
------------------------------------------------------------------------------------------------------------------------------------

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script>
function galery(e) {
	bbb=document.getElementById("response-container");
	if (e.classList.length == 0)
		e.classList.add("select")
	else
		e.classList.remove("select")
}
</script>
<script>
function prueba(e){
 
   var nodoSpan = document.getElementsByClassName('arti');
   var msg = 'Primer for \n';
   for (var i=0; i< nodoSpan.length; i++) { msg = msg + i + ': contiene ' +nodoSpan[i].textContent + ' , y nodeValue '+nodoSpan[i].firstChild.nodeValue +'  ** \n'; }
   msg = 'Segundo for \n';
   for (var i=0; i< nodoSpan.length; i++) { msg = msg + i + ': contiene ' +nodoSpan[i].innerText + '** \n'; }
   msg = 'Tercer for \n';
   for (i in nodoSpan) { msg = msg + i + ': contiene ' + nodoSpan[i].textContent + ' -- \n'; }
 
   //****************************************************************************

 
   var ar_coins = document.getElementsByClassName('arti');
  alert(ar_coins.length);
    for( xx=0;xx < ar_coins.length;xx++){
           alert('una   ' + xx);
	ar_coins[xx].addEventListener("click",cosa(),false);
   }
   function cosa(){
    alert(ar_coins[xx].textContent + '   ' + xx);
  }
 
}
</script>
<script>
function texty(e) {
 
	eee=$(e.currenttarget).click("#response-container").index();
	alert(eee + " - 123 " );
	bbb=document.getElementById("response-container")
	ccc=bbb.textContent;
	ccc=$(this).index()
 
	if (e.classList.length == 0)
		e.classList.add("select")
	else
		e.classList.remove("select")
	a=a
}
</script>
 
<section>
<div id="response-container"></div>
</section>

------------------------------------------------------------------------------------------------------------------------------------

llama.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
$(document).ready(function(){
	var getdetails = function(marca){
		return $.getJSON( "css/consultas.php", { "marca" : marca });
	}
	$('[data-user]').click(function(e){
		e.preventDefault();
		$("#response-container").html("<p>Buscando...</p>");
		getdetails($(this).data('user'))
			.done( function( response ) {
				if( response.success ) {
					var output = "<h2>" + response.data.message + "</h2>";
					suma=0;
					$.each(response.data.users, function( key, value ) {
						co='';
						$.each( value, function ( userkey, uservalue) {
							if(userkey=='marca'  ){
								ma = uservalue
								uservalue = '<div class="bold">' + uservalue + '</div>'
							};
							if(userkey=='art'  ){
								ar = uservalue
								uservalue = '<div class="izquierdo">' + '<div class="bold">' +  ' Art: ' + uservalue + '</div>' + '</div>'
							};
							if(userkey=='pven'  ){
								pv = uservalue
								uservalue = '<div class="derecho">' + '<div class="bold">' +  ' $' + uservalue + ' ' + '</div>' + '</div>'
							};
							if(userkey=='descripcion'  ){                 //|| userkey=='marca1'

								de = uservalue
								uservalue = '<div class="bold">' + uservalue + '</div>'
							};
								if(userkey=='colo'  ){                											co = uservalue;
												co = co.replace(/--/g,'');
									uservalue = '<div class="bold">' + uservalue + '</div>'
								};
							if(userkey=='tall'  ){                											ta = uservalue;
												ta = ta.replace(/--/g,'');
									uservalue = '<div class="bold">' + uservalue + '</div>'
								};
							});
suma=suma+1
output += '<div class="caja1"><div class="caja2">';
output += '<div id="contform">';
output += '<div  >';
 
output += '<div class="marc">' + ma ;
output += '</div><div class="arti">' + 'Art: ' + ar + '<div class="precio">' +  '$' + pv ;
output += '</div></div><div class="descri">' + de ;
output += '</div><div class="colores">' + 'Colores:' + co
output += '</div><div class="talles">' + 'Talles:' + ta
 output += '<input type="submit" class="submit"  id="compras"  name="submit" value="AL' + suma + 'GO" onclick =  "prueba(this)">'
output +=  '</div>';
output += "</div></div>";
output += "</div>";
 output += '<div id="container">';
  output += '<div onclick="galery(this)">';
 output += '<img src="images/' + ma + '/' + ar + 'g.jpg"/>';
 output += "</div></div>";
output += "</div>";
				});
				$("#response-container").html(output);
					var key = JSON.parse(sessionStorage.getItem('key'));
					if (key === null) {
				$(".arti").hide();
				$(".precio").hide();
				$(".colores").hide();
				$(".talles").hide();
					$(".caja2").css("height", "125");
					}else{
				$(".arti").show();
				$(".precio").show();
				$(".colores").show();
				$(".talles").show();
					$(".caja2").css("height", "230");
					}
			} else {
				$("#response-container").html('No ha habido suerte: ' + response.data.message);
			}
		})
		.fail(function( jqXHR, textStatus, errorThrown ) {
			$("#response-container").html("Algo ha fallado: " +  textStatus);
		});
	});
 
});

Gracias por ocuparte. No encuentro tu nombre.
Saludos.
RUbén.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar