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!!!
