AYUDA jQUERY

MadDunDee · #1 (**permalink**) 11/08/2010, 05:49

Muy buenas!

me encomiendo a vosotros para ver si me podéis echar un cable con un pedacito de jQuery con el que estoy trabajando y no sé solucionar.

Veréis, se trata de conseguir que de la lista q veis a continuación, la anidada que tiene
4 opciones, cada vez que el usuario presione sobre una de ellas coloque unas clases y retire otras. Os enseño mejor...

Esta es la lista:

Código PHP:

  <ul class="works-filters">

                            <li class="all inactive active type" id="all">all albums</li>

                            <li class="studio inactive type" id="studio">studio albums</li>

                            <li class="live inactive type" id="live">live albums</li>

                            <li class="compilation inactive type" id="compilation">compilations</li>

                            <li class="fx">

                                <ul class="launcher">

                                    <li class="title-child">fx</li>

                                    <li class="first-child fade" id="op-fade"><a href="#">fade</a></li>

                                    <li class="fade" id="op-stripes"><a href="#">stripes</a></li>

                                    <li class="fade" id="op-slide"><a href="#">slide</a></li>

                                    <li class="fade" id="op-partial"><a href="#">partial</a></li>

                                </ul>

                            </li>

                        </ul>

Esa lista es la que debe de añadir o quitar clases a items de otra lista como este:

Código PHP:

  <li class="work-item hover-fx-fade">

                        <figure><a href="#" title="SEO KEYWORDS"><img src="images/skins/global/samples/cover-dylan.jpg" alt="Album name with SEO KEWORDS" /></a></figure>

                        <div class="work-caption fx-fade">

                            <a class="caption-title" href="#" title="SEO KEYWORDS">Mixed up confusion</a>

                            <span>year 1998</span>

                            <span>16 tracks</span>

                            <span>54 min</span>

                            <span class="button-caption"><a href="#" title="SEO KEYWORDS">preview</a></span>

                            <span class="button-caption"><a href="#" title="SEO KEYWORDS">buy</a></span>

                        </div>

                        <div class="clear"></div>

                    </li>

Como podéis ver existe una clase que se llama "hover-fx-fade" y otra "fx-fade". Pues bien, estas son las clases que me gustaría poner y quitar.

Se trata de 4 efectos distintos que se le puede asignar a cada item. Uno es hover-fx-fade otro hover-fx-slide...

He trabajado sobre algo así, pero no me funciona:

Código PHP:

  //Manage click events

var option = $("ul.launcher li.fade a");

option.click(function(){

    //show the loading bar

    //load selected section

    switch(this.id){

        case "op-fade":

            $('.ef-fade').removeClass("todas las clases asignadas a excepcion de una: "work-item");

            $('.ef-fade').addClass("añade la clase que quiero: "hover-fx-fade");

                        $('.work-caption').addClass('añade-clase' y debe reitirar otras de haber que no sean la propia work-caption);

            break;

        case "op-stripes":

            $('.ef-stripe').removeClass(".hover-fx-stripes");

            break;

        case "op-slide":

            $('.ef-slide').removeClass(".hover-fx-slide");

            break;

        case "op-partial":

            $('.ef-partial').removeClass(".hover-fx-partial");

            break;

    }

});

Espero que se entienda esto un mínimo, me cuesta mucho trabajar este tipo de lógicas de programación y espero que me podáis echar un cable. Un switch posiblemente no sea la solución, así que por favor...HELP MEEEEE!!!!

Gracias!!!

Gashe · #2 (**permalink**) 11/08/2010, 05:58

No entiendo muy bien, pero si quieres cambiar la clase de alguna etiqueta en especial, puedes asignarle una ID a esa etiqueta, y cuado quieras cambiarle la clase se lo mandas por javascript:

<etiqueta id="id1"> </etiqueta>

Y cuando presiones la opcion que quieras haga onClick="document.getElementById('id1').className= 'NOMBRECLASS'"

Espero que te sirva de algo!

beni0888 · #3 (**permalink**) 11/08/2010, 06:12

Hola MadDunDee!
el primer error que salta a la vista en tu código está en las llamadas a la función removeClass(),
como parámetro a la función debes pasarle el nombre de la clase que quieras eliminar sin el punto inicial y tú se lo estás pasando con el punto. No creo que esta sea la solución al problema pero sí que es la solución a uno de los errores.

Un saludo.

MadDunDee · #4 (**permalink**) 11/08/2010, 06:44

llevas razón, beni! copié y pegué código rpaidamente y se me coló eso. Y también llevas razón con que tampoco soluciona nada. Voy a tratar de explicarme un poco mejor...

Cuando se presiona una de las opciones de la lista se tiene que comprobar primero las clases que tiene un objeto, dejar una de ellas porque de ella depende su estilo básico y luego si tiene asignadas otras remover esas clases y añadir la que representa la opción presionada.

Así para cada item de la lista.

Se selecciona un efecto de la lista de opciones y con esta acción se asignan una serie de clases a varios items contenidos en una lista.

Si seleccionamos otra opción para otro efecto deberemos quitar las clases pertenecientes al anterior asignado y meter las nuevas.

Espero haberme explicado mejor ahora, la verdad, no programo y me cuesta mucho. Espero que me podáis ayuda!!

Por otra no me gustaría ensuciar el html con js embebido.

GRACIAS!!!!

Dany_s · #5 (**permalink**) 11/08/2010, 13:32

esta bien con removeClass, especifica cuales separadas por espacio

el siguiente span tiene clases "letraRoja, tamano y borde", al hacerle clic elimino las clases "letraRoja y tamano" pero no "borde" y añado la clase "letraAzul"

Código HTML:

<head>
<title>EJEMPLO</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$( function (){

    $("span").click(function(){
        $(this).removeClass('letraRoja tamano').addClass('letraAzul');
    });
});
</script>
<style>
    .letraAzul{color:blue}
    .letraRoja{color:red}
    .tamano{font-size:26px}
    .borde{border:1px solid #000}
</style>
</head>
<body>
    <span class="letraRoja tamano borde">Texto ejemplo</span>
</body>
</html>

MadDunDee · #6 (**permalink**) 11/08/2010, 18:45

Muchas gracias por tu ayuda, Dany, pero verás, no me funciona. Le veo una lógica aplastante al pedazo de código que adjuntas, pero no consigo hacerlo funcionar. Te pego el código q uso, por si serías tan amable de echarle un vistazo.

En cualquier caso, muchas gracias!!

Una de las listas donde quitar y poner clases dependiendo del efecto:

Código PHP:

  <ul id="list-works" class="grid-12">

                    <li class="pulsado work-item hover-fx-fade">

                        <figure><a href="#" title="SEO KEYWORDS"><img src="images/skins/global/samples/cover-dylan.jpg" alt="Album name with SEO KEWORDS" /></a></figure>

                        <div class="fx work-caption fx-fade">

                            <a class="caption-title" href="#" title="SEO KEYWORDS">Mixed up confusion</a>

                            <span>year 1998</span>

                            <span>16 tracks</span>

                            <span>54 min</span>

                            <span class="button-caption"><a href="#" title="SEO KEYWORDS">preview</a></span>

                            <span class="button-caption"><a href="#" title="SEO KEYWORDS">buy</a></span>

                        </div>

                        <div class="clear"></div>

                    </li>

....

Y aquí los botones en una lista anidada dentro de otra...quizá no esté accediendo correctamente a los objetos...puede ser??

Código PHP:

  <ul class="works-filters">

                            <li class="all inactive active type" id="all">all albums</li>

                            <li class="studio inactive type" id="studio">studio albums</li>

                            <li class="live inactive type" id="live">live albums</li>

                            <li class="compilation inactive type" id="compilation">compilations</li>

                            <li class="fx">

                                <ul class="launcher">

                                    <li class="title-child pulsador">fx</li>

                                    <li class="first-child fade pulsador" id="op-fade"><a href="#">fade</a></li>

                                    <li class="fade pulsador" id="op-stripes"><a href="#">stripes</a></li>

                                    <li class="fade pulsador" id="op-slide"><a href="#">slide</a></li>

                                    <li class="fade pulsador" id="op-partial"><a href="#">partial</a></li>

                                </ul>

                            </li>

                        </ul>

y a continuación el script q estoy usando basado en el que tú has adjuntado antes:

Código PHP:

  var option = $(".pulsador");

var target = $(".pulsado");

var target2 = $(".fx");

$( function (){

 
    $(option).click(function(){

        $(target).removeClass('hover-fx-slide').addClass('hover-fx-fade');

        $(target2).removeClass('fx-slide').addClass('fx-fade');

    });

});