sobre las buenas prácticas

FDA · #1 (**permalink**) 01/09/2010, 10:04

Buenas, llevo ya bastantes linias programadas y me he dado cuenta que lo que empezaban siendo 4 controles tontos ha terminado en muchiiiisimas lineas de codigo dentro del $document(ready).

No me refiero a funciones tipo validación de un formulario, que las llamo a un archivo js externo de toda la vida, sino al manejo de eventos tipo estos por ejemplo:

Código:

$('#container-1').tabs({ remote: true });
			$('#container-2').tabs({ remote: true });
			$('#container-3').tabs({ remote: true });
			$('#container-4').tabs({ remote: true });
			
			$("#tancar_inici").click(function(event){
				$("#soccer").fadeIn();
				$("#football").fadeIn();
				$("#caixa_main").hide();
				$("#logo").animate({'top':"50%"},"slow");
				$("#logo2").animate({'top':"50%"},"slow");
			});

Estoy seguro de que hay una forma más limpia i eficiente de colocar todo eso, pero no he encontrado donde o como.

Y ya puestos a preguntar sobre buenas prácticas... Ahora estoy haciendo otra cosa, tiene muchas cajas de aspecto idéntico, pero no encuentro la manera de decirle esto:

Código:

$(".down").click(function() {
		var dtop=$("#interior_c1").css("top");
		dtop=parseInt(dtop);
		dtop=dtop+50;
		dtop=String(dtop);	
		dtop=dtop+"px";	
		$("#interior_c1").animate({'top':dtop},"slow");
	});

sin tener que especificar cada class .down (es decir sin .down1 .down2......) y lo mismo para cada #interior. Como me lo puedo manejar para que entienda que al darle a un div uno tiene que moverse pero los demas no? habia visto algo tipo .find o .child, pero no terminé de pillarlo.

Grácias!

mayid · #2 (**permalink**) 01/09/2010, 12:12

Para el primer caso, en vez de seleccionar los controles por id, seleccionalos por className. Así, con una sola definición vas a poder manejar varios efectos a la vez.

Sobre lo segundo, si entiendo bien, pensá que un mismo tag html puede tener varios nombres de clase. Entonces, si vos tenes una sucesión ".down1", ".down2" etc nada impide que también tengas asignada una clase extra para manejar a todos a la vez:

<div class="down1 grupoDown">

Que responderá al selector:
$(".grupoDown")

Dany_s · #3 (**permalink**) 02/09/2010, 05:07

también se puede seleccionar varios id

en vez de
$('#container-1').tabs({ remote: true });
$('#container-2').tabs({ remote: true });
$('#container-3').tabs({ remote: true });
$('#container-4').tabs({ remote: true });

esto
$('#container-1, #container-2, #container-3, #container-4').tabs({ remote: true });

pero mejor por clases

para acumuladores como dtop=dtop+50;
se puede hacer dtop += 50; no es gran cosa pero queda mas limpio jeje

para trabajar con el elemento que le hiciste click usas $(this)

Código HTML:

Ver original<head>
<title>Prueba</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    
$(function (){
    $('div').click( function (){
        alert ( $(this).text() )
    });
});
</script>
<style>
    div{width:30px; height:30px; background:blue; margin:10px; float:left}
</style>
</head>
<body>
<div>Uno</div>
<div>Dos</div>
<div>Tres</div>
</body>
</html>

otra que te podes encontrar es seleccionar un elemento y hacer una cosa, seleccionar otra vez el mismo elemento y hacer otra cosa y asi varias veces como:

$('el').append("asd");
$('el').width('200');
$('el').height('200');
$('el').prepend("ddd");

que mejor encadenar
$('el').append("asd").width('200').height('200').p repend("ddd");

FDA · #4 (**permalink**) 02/09/2010, 08:02

mmm vale, he podido recortar un poco el codigo, ya veo que los eventos tengo que gestionarlos si o si desde el mismo $document(ready) así k solo me queda hacer que ocupen el minimo espacio para optimizar el tiempo.

Para lo segundo creo k no me he explicado bien.

Tengo varias cajas, cada una con su información de este estilo:

Código:

<div id="caixa_main">
		<img src="last_news.jpg" class="titol" alt="ultimas noticias" />
		<img src="fletxa_up.jpg" class="up" alt="ultimas noticias" />
		<div id="interior_c1">
			Aquí van les noticies
		</div>
		<img src="fletxa_down.jpg" class="down" alt="ultimas noticias" />
	</div>

En esta caja por ejemplo salen algunas de las ultimas noticias, y pudes hacer que suba o baje la información. Al lado va otra caja con resultados de partidos, donde también se puede subir i bajar para ver todos los resultados uno a uno.

Si lo pongo todo con el mismo id o el mismo className a la que le dé a subir a uno me subiran todos. Pero alguna forma debe haber de que detecte qué caja es la que debe mover, no?
Puedo hacerlo como hasta ahora, pero tantas y tantas lineas de codigo (y aun no he terminado) empiezan a asustarme por su peso y tiempo que tardará en cargar.

Grácias a los dos!

mayid · #5 (**permalink**) 02/09/2010, 08:20

Cita:

Si lo pongo todo con el mismo id

Cita:

para trabajar con el elemento que le hiciste click usas $(this)

A partir de tener identificado el elemento en que hiciste click, podes usar selectores jerarquicos para detectar divs contenedores (ver: parent y children).

En fin, no se si entendí del todo tu último problema, pero espero que con los selectores accedas a donde necesites.

FDA · #6 (**permalink**) 02/09/2010, 08:35

sisi, entendiste bien. Ahora ya sé lo que tengo que mirar y aprender, lo del parent i el children....
Lo que no tengo muy claro es si funcionará con la estructura que he hecho, ya que la imagen para subir o bajar esta dentro de la caja, pero lo que se mueve es el div interior_c1 que también está dentro de la caja.

Me pondré a hacer pruebas, k es la unica manera de entender como funcionan las cosas jejejej

mayid · #7 (**permalink**) 02/09/2010, 10:12

Sería bueno que publiques tu estructura, así también la vemos ;o)

FDA · #8 (**permalink**) 07/09/2010, 08:19

al final logré solucionarlo gracias a vosotros!

os pongo como dejé el codigo:

Código:

$(".down").click(function() {
		var top=$(this).siblings(".interior").css("top");
		top=parseInt(top);
		if (top>-119){	
			var dtop=$(this).siblings(".interior").css("top");
			dtop=parseInt(dtop);
			dtop=dtop-89;
			top=dtop;
			dtop=String(dtop);	
			dtop=dtop+"px";	
			$(this).siblings(".interior").animate({'top':dtop},"slow");
		}
	});
	
	$(".up").click(function() {
		var top=$(this).siblings(".interior").css("top");
		top=parseInt(top);
		if (top<59){
			var dtop=$(this).siblings(".interior").css("top");
			dtop=parseInt(dtop);
			dtop=dtop+89;
			top=dtop;
			dtop=String(dtop);	
			dtop=dtop+"px";	
			$(this).siblings(".interior").animate({'top':dtop},"slow");
		}
	});

Ahora ahí dentro puedo llamar por php a las ultimas noticias. y para que el interior dé la sensacion de desplazarse hacia arriba jugué con el z-index de los elementos que intervenian i con un overflow:hidden del div principal de la caja.

Gràcias!