Foros del Web » Programando para Internet » Jquery »

Duda con jquery y el "this"

Estas en el tema de Duda con jquery y el "this" en el foro de Jquery en Foros del Web. Hola amigos, soy nuevo en jquery y quisiera saber si me pueden ayudar con unos scrips lo que quiero hacer es lo siguiente: Tengo un ...
  #1 (permalink)  
Antiguo 23/07/2012, 11:36
 
Fecha de Ingreso: julio-2012
Mensajes: 1
Antigüedad: 12 años, 4 meses
Puntos: 0
Duda con jquery y el "this"

Hola amigos, soy nuevo en jquery y quisiera saber si me pueden ayudar con unos scrips

lo que quiero hacer es lo siguiente: Tengo un div que al pincharlo hace aparecer dos nuevos divs. La idea es que esto funcione como un tooltip o hotspot... que al presionarlo me muestre otro contenido en un div que se despliega... el problema es que si repito esta misma estructura en el html y pincho sobre un elemento se abren todos, este es el script que estoy ocupando:

$(".hot").click(function () { $(".spot").show("fast"); });
$(".hot").click(function () { $(".hot2").fadeIn("fast"); });
$(".hot2").click(function () { $(".spot").hide("fast"); });
$(".hot2").click(function () { $(".hot2").fadeOut("fast"); });

y este el HTML
<div class="h01" style="width:20px; height:20px; position:absolute; top:200px; left:350px;">
<div class="hot" style="width:20px; height:20px; background-color:#F90; position:absolute; line-height:20px; font-size:17px; text-align:center; color:#FFF; cursor:pointer;">+</div>
<div class="hot2" style="width:20px; height:20px; background-color:#F90; position:absolute; line-height:20px; font-size:17px; text-align:center; color:#FFF; display:none; z-index:500; cursor:pointer;">x</div>
<div class="spot" style="width:200px; height:100px; background-color:#09C; display:none; margin:10px; top:10px; border:dashed 1px #CCC;"></div>
</div>

es posible utilizar un "this" para abrir sólo el elemento que estoy pinchando y no todos los elementos...? y como sería..??

Gracias !!!
  #2 (permalink)  
Antiguo 24/07/2012, 01:57
Avatar de dontexplain  
Fecha de Ingreso: junio-2012
Mensajes: 536
Antigüedad: 12 años, 6 meses
Puntos: 127
Respuesta: Duda con jquery y el "this"

Cuando se attach un suceso a un elemento mediante el selector de clase ($(".clase")) las acciones dispuestas se ejecutan a todos los elementos con tal clase. Las clases no se inventaron para identificar elementos individualmente sino colectivamente, para eso has de usar un puente, que servirá de conexión común.

Si la estructura es la misma usa un div que los contenga y a través de él div puedes acceder al elemento padre y de ahí a los hijos con la clase que quieras:

<div class='padre'>
<div class="h01"></div>
<div class="hot2"></div>
</div>

$(".padre > .h01").click(function(){$(this).parent().children( ".hot2").fadeIn("fast");)}

Así podrás repetir la estructura tantas veces como quieras, el elemento padre será común a los hijos y por tanto único.

Un saludo.
__________________
21añero.
HTML/CSS, PHP, JS/jQuery, Mysql; NodeJS/Socket.io (& V8); C++ ; Python (wxpy); Ensamblador.
Músico (clarinetista/pianista) y compositor

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:37.