Duda "this" en jQuery

cluster28 · #1 (**permalink**) 07/02/2010, 12:45

Hola,

Tengo una duda de cómo usar "this" en jQuery en este caso (resumido). (Soy super novato).

Código HTML:

<div class="parrafo">
<p id="titulo"><img class="mas" title="Mostrar" src="../imagenes/1.png"/>Titulo1</p>
<p id="cuerpo">Texto</p>
</div>

<div class="parrafo">
<p id="titulo"><img class="mas" title="Mostrar" src="../imagenes/1.png"/>Titulo2</p>
<p id="cuerpo">Texto</p>
</div>


<div class="parrafo">
<p id="titulo"><img class="mas" title="Mostrar" src="../imagenes/1.png"/>Titulo3</p>
<p id="cuerpo">Texto</p>
</div>

CSS

Código HTML:

#cuerpo{
display: none;
}

jQuery

Código HTML:

$(document).ready(function(){
 $(function(){  
     $(".mas").click(function(event) {  
   	 if($(".mas").attr("title") == "Ocultar")
		{
        	//Ocultar #cuerpo
			$("#cuerpo").hide();
			//Actualizar imagen
        	$(".mas").attr("src","../imagenes/1.png").attr("title","Mostrar");
     	}
		//Si no:
		else
		{
			//Mostrar #cuerpo
	        $("#cuerpo").show();
	        //Actualizar imagen
	        $(".mas").attr("src","../imagenes/2.png").attr("title","Ocultar");
		} 
 });  
 });

});

El caso es que quiero que al pulsar sobre la imagen se muestre el cuerpo que hay justo debajo. Se podría hacer poniendo un id diferente a cada etiqueta y jugar con los nombres, pero lo veo menos práctico. si se usa "this" hace referencia a la etiqueta pulsada, pero se puede usar "this" para moverse para arriba o para abajo después de hacer referencia a una etiqueta?

Gracias.

Dany_s · #2 (**permalink**) 07/02/2010, 13:03

primero tenes id repetidos y deben ser únicos

id="titulo" e id="cuerpo"

cambia eso por
class="titulo" y class="cuerpo"

ahora cuando hagan click sobre la imagen con clase 'mas' buscas el div padre con clase .parrafo y desde ahi podes buscar el parrafo con clase .cuerpo, para mostrar y ocultar podes usar toggle()

queda asi

Código HTML:

<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $( function (){
            $('img.mas').click( function (e) {
                $(this).parents('.parrafo').find('.cuerpo').toggle();
                $(this).attr("src","../imagenes/2.png");
            });
        });
        </script>
    </head>
    <style>
        .cuerpo{
            display: none;
        }
    </style>
<body>
<div class="parrafo">
<p class="titulo"><img class="mas" src="../imagenes/1.png"/>Titulo1</p>
<p class="cuerpo">Texto 1</p>
</div>

<div class="parrafo">
<p class="titulo"><img class="mas" src="../imagenes/1.png"/>Titulo2</p>
<p class="cuerpo">Texto 2</p>
</div>


<div class="parrafo">
<p class="titulo"><img class="mas" src="../imagenes/1.png"/>Titulo3</p>
<p class="cuerpo">Texto 3</p>
</div>
</body>
</html>

cluster28 · #3 (**permalink**) 07/02/2010, 13:41

Ok gracias, me va perfecto. Es que no sabía cómo hacer para moverme por el DOM. Es que la página de jQuery me supera. Al estar en Inglés me cuesta entender las explicaciones.

Cita:

Iniciado por Dany_s

Código HTML:

primero tenes id repetidos y deben ser únicos

id="titulo" e id="cuerpo"

cambia eso por
class="titulo" y class="cuerpo"

Ya se que los id´s deben ser únicos, pero hice copiar/pegar para todos los párrafos y como no veo que de problemas los he dejado. jeje

Dany_s · #4 (**permalink**) 08/02/2010, 04:36

yo tampoco entiendo inglés pero en la documentación incluyen ejemplos tan sencillos que se entiende muy bien la utilidad de cada función, solo hay que copiar y pegar el ejemplo y ver como funciona, también hay mucha doc en español

saludos

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

Basicamente, la forma de this en jQuery es $(this), y vale dentro de las llaves {} (por ejemplo, dentro de una función).

A veces puede ser que tengas que utilizar this en su lugar.

La documentación estaba buena hasta hace un mes atras. Ahora me pierde un poco, y me remito a buscar los ejemplos de la API, y a leer por arriba. Pero si, hay tutoriales o ejemplos fuera de la web oficial.

Dany_s · #6 (**permalink**) 08/02/2010, 09:16

si ahora cambió, me gustaba la anterior