Sintaxis correcta en jQuery

[MadDunDee]

Hola!!

necesito saber si me podéis echar un cable con una duda que tengo acerca de la sintaxis correcta de este pequeño código en jQuery.

Código PHP:

  $(document).ready(function(){
 
$('li#item1 span.hidden').hide();
$('li#item2 span.hidden').hide();
$('li#item3 span.hidden').hide();
$('li#item4 span.hidden').hide();
$('li#itemN span.hidden').hide();
 
$('li#item1').mouseenter(function(){
$('li#item1 span.hidden').fadeIn('fast');
$('li#item1').addClass(change-back);
});
 
$('li#item2').mouseenter(function(){
$('li#item2 span.hidden').fadeIn('fast');
$('li#item2').addClass(change-back);
});
 
$('li#item1').mouseleave(function(){
$('li#item1 span.hidden').fadeOut('fast');
$('li#item1').removeClass(change-back);
})
 
$('li#item2').mouseleave(function(){
$('li#item2 span.hidden').fadeOut('fast');
$('li#item2').removeClass(change-back);
})
 
$('li#item3').mouseleave(function(){
$('li#item3 span.hidden').fadeOut('fast');
$('li#item3').removeClass(change-back);
})
 
$('li#itemN').mouseleave(function(){
$('li#itemN span.hidden').fadeOut('fast');
$('li#itemN').removeClass(change-back);
})
 
}); 
   

Como podéis ver se trata de una repetición de funciones para distintos elementos que se tiene que comportar de la misma manera. Imagino que debe de haber alguna forma de agrupar esto para no repetir cada sentencia por cada elemento. Un bucle tipo for o alguna manera más correcta de escribir el código. Además, el addClass y removeClass no me funcionan y no sé por qué.

Espero podáis perdonar tanta ignorancia!

Un abrazo y muchas gracias!!

[caricatos]

Tema movido desde javascript

[mayid]

Primero, le pones un nombre de clase a tus divs. Luego los accedes así:

$('li.items')

Para adjudicar a cada uno la misma funcion, armas un bucle (each).

var items = $('li.items');

items.each(function(){

// a cada uno le va a pasasr esto:
$(this).mouseenter(function(){
$(this span.hidden').fadeIn('fast');
$('this).addClass("change-back");
});

}

Tengo dudas sobre esta sintaxis. Por favor chequeala: $(this span.hidden')

SObre el addClass... no será una falta de comillas nomás?

[MadDunDee]

Hola de nuevo,

en primer lugar gracias por mover el tema y responder a mi pregunta.

Mayid, he probado con la sintaxis q comentas:

Código PHP:

  $(document).ready(function(){
var items = $('li.items');
 
items.each(function(){
 
// a cada uno le va a pasasr esto:
$(this).mouseenter(function(){
$(this span.hidden).fadeIn('fast');
});
$(this).mouseleave(function(){
$(this 'span.hidden').fadeOut('fast');
});
 
}
}); 
   

y no me funciona, supongo que tiene que ver con el uso del this, pero he buscado en google y no encuentro ningún ejemplo similar que me saque de la duda. Lo puedes revisar, porfavor??

En cualquier caso te agradezco mucho tu tiempo. Claramente la solución va en esa dirección.

Gracias!!

[mayid]

Hay dos this que resolver:

A este le falta un signo +
$(this 'span.hidden')

Al otro... no se. Quizas puedas usar .children() . O un sensillo >

Pero ojalá que Dany se pase por acá y nos resuelva el tema!

[mayid]

Acabo de leer un dato interesante en otro post. Las soluciones que deduje para lo tuyo son:

jQuery(this).find("span.hidden")
jQuery(this).children("span.hidden")

Podes usar cualquiera de las dos.

[Dany_s]

no hace falta ponerle un id a cada li
no hace falta ocultar ".hide()" los li con jquery si con css lo podés hacer y sin usar clase si lo que buscas es ocultar todos

igual si queres aplicar hide() a varios elementos podes seleccionar todos y aplicar hide, por ej:
$('div.algunaClase, h1, #algunid, a').hide();

mouseenter y mouseleave es igual que hacer un
hover(funcionEntrar, funcionSalir)

y en vez de seleccionar cada una de los item de la lista por id te conviene seleccionar todos los item de una lista con id, por ej:

$('#miLista li').hover y para aceder al span usas this (que va a ser tu li donde hacen mouseover) $(this).find('span').fadeIn('fast'); pero antes de pasar al span podés aplicar la clase al item y luego buscar el span, quedaría:
$(this).addClass('change-back').find('span').fadeIn('fast');

para el mouseout es similar nada mas que elimins la clase y haces fadeout

Código HTML:

<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){

            $('#miLista li').hover( function (){
                $(this).addClass('change-back').find('span').fadeIn('fast');
            }, function (){
                $(this).removeClass('change-back').find('span').fadeOut('fast');
            });
        });
        </script>
        <style>
            #miLista>li>span{display:none}
            .change-back{color:red}
        </style>
    </head>
    <body>
        <ul id="miLista">
            <li><span>1</span></li>
            <li><span>2</span></li>
            <li><span>3</span></li>
            <li><span>4</span></li>
        </ul>
    </body>
</html> 

Con eso por mas que agregues 500 item va a funcionar igual

[MadDunDee]

Dany, muchas gracias por aclararnos el asunto, especialmente a mi. Ahora que veo tu ejemplo me parece más abominable lo que posteé! Le estaba quitando toda la lógica a la forma en cómo trabaja jQuery.

Muchas gracias amigo, funciona perfectamente!!

Un saludo a los dos.