Foros del Web » Programando para Internet » Jquery »

No consigo hacer funcionar los selectores en JQuery

Estas en el tema de No consigo hacer funcionar los selectores en JQuery en el foro de Jquery en Foros del Web. Buenas, He creado una pequeña animación para mi web. La animación funciona pero no entiendo porqué la animación no se aplica a todos los elementos ...
  #1 (permalink)  
Antiguo 02/09/2010, 05:03
Avatar de JCmaillo  
Fecha de Ingreso: septiembre-2010
Mensajes: 35
Antigüedad: 13 años, 10 meses
Puntos: 11
No consigo hacer funcionar los selectores en JQuery

Buenas,

He creado una pequeña animación para mi web. La animación funciona pero no entiendo porqué la animación no se aplica a todos los elementos id iguales, únicamente se aplica al primero.

Tengo 4 bloques con los mismos selectores, pero solo se aplica al primero de ellos.


Código:
<script>
jQuery('#im_portada').hover(

  function () {
    jQuery('#ampliar').fadeIn();
  } 
, 
 function () {
    jQuery('#ampliar').fadeOut();
  });

</script>
</body>
</html>
  #2 (permalink)  
Antiguo 02/09/2010, 06:03
 
Fecha de Ingreso: enero-2008
Ubicación: Buenos Aires
Mensajes: 305
Antigüedad: 16 años, 6 meses
Puntos: 14
Respuesta: No consigo hacer funcionar los selectores en JQuery

Basicamente un ID es un IDENTIFICADOR, por lo cual si tienes 4 elementos con el mismo ID deja de ser lo que es, un IDENTIFICADOR.

Se aplica solo al primero, porque se entiende que un ID pertece a un solo elemento, entonces toma como el elemento con ese IDENTIFICADOR al primero.

Para aplicarle a varios elementos, lo puedes hacer mediante una clase. Su poniendo que el elemento que se repite es "#ampliar, sería:

Código Javascript:
Ver original
  1. <script>
  2. jQuery('#im_portada').hover(
  3.  
  4.   function () {
  5.     jQuery('.ampliar').fadeIn();
  6.   }
  7. ,
  8.  function () {
  9.     jQuery('.ampliar').fadeOut();
  10.   });
  11.  
  12. </script>
  #3 (permalink)  
Antiguo 02/09/2010, 08:23
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 3 meses
Puntos: 101
Respuesta: No consigo hacer funcionar los selectores en JQuery

Cita:
pero no entiendo porqué la animación no se aplica a todos los elementos id iguales
Tal cual lo que dice kokoou. El id es para elementos unicos. Usa className.

Tema aparte: acordate que dentro de un evento podes usar el selector $(this):

Cita:
<script type="text/javascript">

jQuery('#im_portada').hover( function () {

jQuery(this).fadeIn(); }
, function () {
jQuery(this).fadeOut();
});

</script>
</body>
  #4 (permalink)  
Antiguo 02/09/2010, 08:36
Avatar de seik!  
Fecha de Ingreso: mayo-2006
Mensajes: 492
Antigüedad: 18 años, 1 mes
Puntos: 6
De acuerdo Respuesta: No consigo hacer funcionar los selectores en JQuery

Si deseas expandir una funcion a todos los elementos que compartan el selector...

Ocupa la funcion bind()

y si el contenido se agrega dinamicamente debes ocupar live()

asi tomara los elemento que compartan por ejemplo con un selector CLASS y repetira su comportamiento en todos los DOM que compartan este atributo.

Saludos..
__________________
sEIK! -Chile-
Analista Programador.
  #5 (permalink)  
Antiguo 02/09/2010, 11:00
Avatar de JCmaillo  
Fecha de Ingreso: septiembre-2010
Mensajes: 35
Antigüedad: 13 años, 10 meses
Puntos: 11
Respuesta: No consigo hacer funcionar los selectores en JQuery

Gracias por la respuesta, con el selector class ya funciona para todos los elementos. Aunque me acabo de dar cuenta de que realmente no está funcionando como quiero.
Estos son los divs que tengo:

Código:
<!--PRIMER BOX-->
<div id="box" class="box1">
<a href="images/im_portada1.png" rel="lightbox[portada]">
<div id="im_portada" style="background-image:url(images/im_portada1.png);"><div class="ampliar"><img src="images/img_ampliar.png" width="117" height="13" /></div></div></a>
</div>
<!--SEGUNDO BOX-->
<div id="box" class="box2">
<a href="images/im_portada1.png" rel="lightbox[portada]">
<div id="im_portada" style="background-image:url(images/im_portada1.png);"><div class="ampliar"><img src="images/img_ampliar.png" width="117" height="13" /></div></div></a>
</div>
<!--TERCER BOX-->
<div id="box" class="box3">
<a href="images/im_portada1.png" rel="lightbox[portada]">
<div id="im_portada" style="background-image:url(images/im_portada1.png);"><div class="ampliar"><img src="images/img_ampliar.png" width="117" height="13" /></div></div></a>
</div>
<!--CUARTO BOX-->
<div id="box" class="box4">
<a href="images/im_portada1.png" rel="lightbox[portada]">
<div id="im_portada" style="background-image:url(images/im_portada1.png);"><div class="ampliar"><img src="images/img_ampliar.png" width="117" height="13" /></div></div></a>
</div>
El problema es que ahora cuando situo el cursor sobre el primer marco me anima todos los demás. ¿Como puedo hacer la selección para no tener que repetir el mismo script 4 veces con diferentes id y class.?
  #6 (permalink)  
Antiguo 02/09/2010, 11:41
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 3 meses
Puntos: 101
Respuesta: No consigo hacer funcionar los selectores en JQuery

Salta a la vista que aun no corregiste los id repetidos. No tenes en claro el concepto de id. Y eso es básico para el uso de jQuery (también de CSS).

Leete esto:
http://www.blogdelaweb.com/conceptos...rial-html-css/

Cita:
El problema es que ahora cuando situo el cursor sobre el primer marco me anima todos los demás. ¿Como puedo hacer la selección para no tener que repetir el mismo script 4 veces con diferentes id y class.?
Si ya corregiste el script, por favor republicalo así lo vemos. No podemos opinar a ciegas ;o)
  #7 (permalink)  
Antiguo 02/09/2010, 12:10
Avatar de JCmaillo  
Fecha de Ingreso: septiembre-2010
Mensajes: 35
Antigüedad: 13 años, 10 meses
Puntos: 11
Respuesta: No consigo hacer funcionar los selectores en JQuery

Es correcto lo que decis, lo he estado siempre usando mal. Corregiré todos los fallos de selectores y cuando los tenga lo republico.

Muchas Gracias
  #8 (permalink)  
Antiguo 02/09/2010, 12:44
Avatar de JCmaillo  
Fecha de Ingreso: septiembre-2010
Mensajes: 35
Antigüedad: 13 años, 10 meses
Puntos: 11
Respuesta: No consigo hacer funcionar los selectores en JQuery

Ya he corregido todos los selectores. Parece que funciona mejor que ántes.
El único inconveniente es que la animación debe de ocurrir en 4 elementos class ".ampliar" distintos, incluidos cada uno en otros 4 class ".im_portada". Con este script se animan todos a la vez. Estoy intentando usar subselectores pero no tengo mucha prática.

Código:
<script>
$('.im_portada').hover(

  function () {
    $('.ampliar').fadeIn();
  } 
, 
 function () {
    $('.ampliar').fadeOut();
  });

</script>
  #9 (permalink)  
Antiguo 02/09/2010, 13:29
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 3 meses
Puntos: 101
Respuesta: No consigo hacer funcionar los selectores en JQuery

Bueno, volvemos a mi primer mensaje:
http://www.forosdelweb.com/f127/no-c...6/#post3542570

Usa $(this) o jQuery(this) para identificar tu elemento (el que origina el evento)
  #10 (permalink)  
Antiguo 02/09/2010, 14:33
Avatar de JCmaillo  
Fecha de Ingreso: septiembre-2010
Mensajes: 35
Antigüedad: 13 años, 10 meses
Puntos: 11
Respuesta: No consigo hacer funcionar los selectores en JQuery

Conseguido!!!

Probé lo que me comentaste del selector (this) pero no lo hice bien. Ahora si he conseguido dar con la estructura adecuada.

Muchas gracias.

Código:
<script>
$('.im_portada').hover(

  function () {
    $(this).children('.ampliar').fadeIn();
  } 
, 
 function () {
    $(this).children('.ampliar').fadeOut();
  });

</script>

Etiquetas: selectores
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 20:20.