como saber el id del que disparó el evento?

[FDA]

He intentado mil maneras y no lo consigo.

Tengo una lista con elementos con clase i id (todas las clases son iguales i el id es único para cada elemento). Mi intención es que desaparezca la lista y aparezcan otras cosas pero con cosas de css cambiadas según el elemento de la lista al que hagamos click.

Mejor pongo el código y entendereis algo más.

el html:

Código:

<ul>
				<li class="campionat" id="c1"><div class="logo_camp"><img src="logos/soccer/futsal.jpg" /></div><div class="descripcio_camp">El torneig de futbol sala per a equips federats nacionals i internacionals</div>
				</li>
				<li class="campionat" id="c2"><div class="logo_camp"><img src="logos/soccer/fut7.jpg" /></div><div class="descripcio_camp">El torneig de futbol sala per a equips federats nacionals i internacionals</div>
				</li>
				<li class="campionat" id="c3"><div class="logo_camp"><img src="logos/soccer/fut11.jpg" /></div><div class="descripcio_camp">El torneig de futbol sala per a equips federats nacionals i internacionals</div>
				</li>	
				<li class="campionat" id="c4"><div class="logo_camp"><img src="logos/soccer/futsal24.jpg" /></div><div class="descripcio_camp">El torneig de futbol sala per a equips federats nacionals i internacionals</div></li>
				</ul>

el js que va en el ready

Código:

$("li.campionat").click(function(event) {
				$("li.campionat").fadeOut();
				$("#events_aux").fadeOut();
				$("#thumbs_c").fadeIn();
				$("#thumb_c1").fadeIn();
				$("#thumb_c2").fadeIn();
				$("#thumb_c3").fadeIn();
				$("#thumb_c4").fadeIn();
				$("#barra_camp").fadeIn();
				AQUÍ FALTA COMO CONTROLARLO I EN UN IF METER EL CAMBIO QUE TOQUE PARA CADA ID
			});

Bueno, lo he puesto dentro, pero básicamente es eso.

He intentado con event.target y nada, con otras formas, algunas surrealistas de comparar el id, pero nada. Y por la red no encuentro como solucionarlo.

[mayid]

Lo que necesitas es simple. Dentro de un evento, $(this) se refiere al originador del evento.

Con esto: $("li.campionat").fadeOut(); está escondiendo todo. Luego estás definiendo un fadeIn para cada elemento. Así que no entiendo del todo tu intención (por qué no usar otra vez el className en vez de el id?)

[FDA]

pq son cosas distintas, campionat se refiere a una lista donde hay campeonatos apra elegir uno.
Entonces aparecen los thumbs (eso lo voy a cambia, reciclava un codigo de preuba k tenia) y desaparece la lista.

Pero según en que campeonato hagan click deberia aparecer el #barra_camp con un color distinto (eso lo hago, pero me lo hace para todos, me falta el control que le diga qué campeonato és, por eso les puse id's distintos a cada elemento de la lista.

No se si me explico del todo....

Si me la lia mucho lo hare con ajax i listos, era para no abusar de ajax i aprender a llamar las cosas de la forma más eficiente posible, pq la otra alternativa era hacer todo eso para cada id, pero aunque funcionaria, es repetir mucho codigo.

[tredio]

para obtener el id puedes hacer.

Código Javascript:

$(this).attr('id');
 

[FDA]

yeah!!!!

Justo eso es lo que necesitaba... mira que me habia vuelto loco y habia probado con todo menos esto.... lo que me falta pa pillar una minima soltura con todo el API de jquery......

Grácias!!!

[mayid]

Y para qué querías recuperar el id? El selector $(this) es tan específico como un id.

[FDA]

pq tenia que comparar el id del que ha pinchado y responder segun eso.

Al final ha quedado una de mis funciones monstruo... poco a poco aprendo a reducirlas, pero me sigue quedando un codigo que me sigue pareciendo demasiado extenso. Tb hay que tener en cuenta que la pàgina funciona casi casi como un escritorio, así que jquery trabaja bastante jejejej

Código:

$("li.campionat").click(function(event) {
				$("li.campionat").fadeOut();
				$("#events_aux").fadeOut();
				$("#barra_camp").fadeIn();
				$("#content_camp").fadeIn();
				$("#thumbs").show();
				var champ=$(this).attr('id');
				if (champ=='c1'){
					$("#barra_camp").css({'background-color':"#FF3300"});
					$(".menu_camp").css({'background-color':"#FF3300"});
					$("#mc1").fadeIn();
					$("#thumb_c1").css({'background-image':"url(logos/soccer/futsal_th.jpg)"})
					llamadasin('campionats/c1/presentacio.html','content_camp');;
				}
				if (champ=='c2'){
					$("#barra_camp").css({'background-color':"#FFCC33"});
					$(".menu_camp").css({'background-color':"#FFCC33"});
					$("#mc2").fadeIn();	
					$("#thumb_c2").css({'background-image':"url(logos/soccer/fut7_th.jpg)"});
					llamadasin('campionats/c2/presentacio.html','content_camp');
				}
				if (champ=='c3'){
					$("#barra_camp").css({'background-color':"#66FF00"});
					$(".menu_camp").css({'background-color':"#66FF00"});
					$("#mc3").fadeIn();				
					$("#thumb_c3").css({'background-image':"url(logos/soccer/fut11_th.jpg)"});
					llamadasin('campionats/c3/presentacio.html','content_camp');
				}
				if (champ=='c4'){
					$("#barra_camp").css({'background-color':"#3399FF"});
					$(".menu_camp").css({'background-color':"#3399FF"});
					$("#mc4").fadeIn();				
					$("#thumb_c4").css({'background-image':"url(logos/soccer/futsal24_th.jpg)"});
					llamadasin('campionats/c4/presentacio.html','content_camp');
				}
			});

Como ves, según el id del elemento de la lista pongo unos colores o otro (que identifican cada campeonato) y muestro un menú o otro, mientras que cargo via ajax una pàgina externa en el un div.

[mayid]

Te conviene usar variables en vez de definir una y otra vez las mismas acciones. Es más fácil de mantener, y más limpio:

Código Javascript:

if (champ=='c1'){
    bcolor = "#FF3300";
    bimage = "futsal_th.jpg";
}
else if (champ=='c2'){
    bcolor = "#FFCC33";
    bimage = "fut7_th.jpg";
}
else if (champ=='c3'){
    etc
}
else if (champ=='c4'){
    etc
}
 
$("#barra_camp").css({'background-color': bcolor});
$(".menu_camp").css({'background-color': bcolor});
$("#m" + champ ).fadeIn();
$("#thumb_c1").css({'background-image':"url(logos/soccer/" + bimage +")"})
llamadasin('campionats/c1/presentacio.html','content_camp');
 

[FDA]

wow!!!

He cambiado la ruta i el id del thumb para que vaya completamente.

Eso si es elegante... y no mi codigo.... si es que no es lo mismo que funcione a que funcione bien...
Si vieras mi código entero lo cambiarias de arriba a bajo jejejej

Gracias por los consejos, a ver si los interiorizo y poco a poco me queda todo mas limpio.

Por cierto, esto me recuerda al otro hilo que abrí sobre buenas pràcticas, esté codigo es también mas eficiente? menos? lo mismo? Como eso solo lo ejecuta si entra en el if (es decir solo una vez) en el fondo son el mismo numero de instrucciones, no?
Entonces es mejor pq también hace que la pàgina pese un poquito menos, no?

A la que hago pàginas con mil cosas que se mueven y actuan en cierto modo como si fueran aplicaciones de escritorio el codigo se hace largo y me da miedo de que después vaya todo lento...
Por ejemplo, si aquí dejo muchas cosas sin mostrar, se cargan igualmente aunque no se muestren, no? Pero la solucion seria ajax y ajax dentro de ajax.... y me parece peor la solucion que la enfermedad.

Supongo que todo tendrá que ver con el peso del contenido a la hora de utilizar ajax o no. Bueno, eso y el hecho de que es mucho menos engorroso de modificar después una página que se muestra dentro que una pàgina con mil cosas cargadas....

Total que me hago un lio pq tengo mil formas distintas de hacer las cosas y no se con cual quedarme jejejej

[Dany_s]

Total que me hago un lio pq tengo mil formas distintas de hacer las cosas y no se con cual quedarme

veo que estas preocupado jeje

y siempre es un problema, pero a la larga vas adoptando una manera o según que problema se te presente encontrás otras formas de mejorar jeje

buscá blogs que hablen de jquery y vas a encontrar cosas buenas, yo siempre miro como hacen las cosas los demás, y no te quedes en jquery, acordate de javascript que te va a ayudar mucho jeje

y nunca hay "UNA" forma de hacerlo