Jquery no me funciona

johannes13 · #1 (**permalink**) 21/03/2012, 23:26

tengo un problema quiero darle un efecto de fadeIn a unos div que se repiten con el mismo id pero solo me funciona para el primero pero no para los demas, la idea seria ponerle diferentes id, pero el id del div guardara imagenes que se cargaran por eso se van a duplicar varias veces cuando cargue de la BD y por eso queria el mismo efecto para todas.

<script>
$(document).ready(function(){

$("#bg_foto").mouseenter(function(e){
$("#foto").fadeIn(500);
});

});
</script>

<body>

<div id="bg_foto">
<div id="foto"><img src.....></div>
</div>

<div id="bg_foto">
<div id="foto"><img src.....></div>
</div>

<div id="bg_foto">
<div id="foto"><img src.....></div>
</div>

</body>

ah! me olvide decir que hay varios div osea no me funciona tampoco $("div") y luego usar el $(this) para escojer el que esta teniendo el evento.

Gracias por las respuestas :)

Shirak2 · #2 (**permalink**) 22/03/2012, 18:50

Los ids son únicos por página, no puedes tener un id repetido. Usa una clase.

johannes13 · #3 (**permalink**) 22/03/2012, 22:07

gracias por tu respuesta, pero si se pueden tener div con el mismo id, con css me funciona bien el efecto pero con #capa:hover pero es un efecto muy simple, me gustaria usar el FadeIn de jquery pero como mencione solo me funciona con el primer div los demas no me funcionan, como podria hacer que todos los div tengas ese efecto.

gatero · #4 (**permalink**) 23/03/2012, 01:28

Se pueden tener divs con el mismo id, pero para que jQuery generalice debes usar una clase, si lo haces con id solo usara el primer elemento que lo tenga.

Shirak2 · #5 (**permalink**) 23/03/2012, 06:08

Me corrijo, no se debe tener un id repetido, ya que no es HTML válido. Si lo repites, puedes encontrarte errores inesperados.

This attribute assigns a name to an element. This name must be unique in a document.

Usa una clase.

Shirak2 · #6 (**permalink**) 23/03/2012, 06:16

HTML 5

MarioAraque · #7 (**permalink**) 23/03/2012, 07:25

johannes13 que en CSS puedas hacer funcionar tus estilos usando mismos ids para etiquetas HTML no quiere decir que en Jquery funcionen.
Tal como dijeron arriba, por convencion, debes unificar el id de cada etiqueta, y si eso representa que tengas que cambiar tu CSS ... deberias hacerlo igual, no es una buena practica no tocar el codigo solo "porque funciona" , en la mayoria de los casos (y en el tuyo en especial) es logico que el codigo se pueda mejorar, y con ello mejorar el conocimiento y experiencia sobre lo que estas viendo, y para la proxima hacerlo mejor.

Si cambias tus id=foto por class=foto y tu id=bg_foto por class=bg_foto, y pones este codigo, quizas te funcione (digo funcione porque no lo he probado)

Código HTML:

Ver original<script>
$(document).ready(function(){
 
$(".bg_foto").each(function(){
  $(this).bind("mouseenter",function(){
    $(this).find(".foto").fadeIn(500);
  });
});
 
});
</script>
 
 
<body>
 
<div class="bg_foto">
<div class="foto"><img src.....></div>
</div>
 
<div class="bg_foto">
<div class="foto"><img src.....></div>
</div>
 
 
<div class="bg_foto">
<div class="foto"><img src.....></div>
</div>
 
</body>

El CSS seguro se te va a desmontar, pero ya dependera de vos querer cambiarlo o no, o buscar la manera de que jquery funcione de la manera que vos quieras.

Saludos.

johannes13 · #8 (**permalink**) 24/03/2012, 22:00

muchas gracias, nunca me puse a pensar en hacerlo con class, su puse si no funcionaba con id nica funcionaria con class, pero luego de hacer algunas cositas con class me llego a salir el efecto deseado, jeje muchas gracias por la respuesta

para otras personas interesadas asi nomas era.

$(".bg_foto").mouseenter(function(e){
$(".foto",$(this)).fadeIn(500);

});

luisalberti · #9 (**permalink**) 04/01/2013, 06:03

Yo lo hago funcionar así la misma clase y luego this.

<script type="text/javascript">
var x; //variable
x=$(document); // Nueva copia de objeto documento
x.ready(resaltar); //Cuando el objeto este cargado en tal caso utilizaremos la función inicializar
function resaltar()
{
var x;
x=$(".link");
x.hover(resaltame);
x.mouseleave(salir);
}
function resaltame()
{
var x;
x=$(this);
x.css("color","yellow");
}
function salir()
{
var x;
x=$(this);
x.css("color","white");

}