Conmutación a tres vías de dos estados (Javascript o jQuery)

Estoy trabajando en una página que mostrará los precios en una variedad de monedas (euros, libras o dólares). Mi objective es mostrar el precio en euros primero, manteniendo los precios de la libra y el dólar ocultos.

 

Euro

Cuando se hace clic en el botón, necesito las tres ID para pasar por los tres estados que se muestran / ocultos / ocultos, ocultos / mostrados / ocultos y ocultos / ocultos / mostrados. Hasta ahora he hecho que funcione con dos ID (¡no es difícil!).

 $('#mybutton').click(function() { $('#euro').toggleClass('hidden','shown'), $('#pound').toggleClass('hidden','shown'); }); 

No puedo ver cómo extender esto a la tercera identificación. Cualquier idea recibida con gratitud.

Solo quería señalar que puede estar confundido sobre cómo funciona toggleClass. El segundo parámetro nunca es una cadena como una clase. En su lugar, es un booleano. Me deshice de la clase “mostrada” (las cosas se muestran de forma predeterminada) y usé un booleano para el segundo argumento:

 i=0; $('#mybutton').click(function(){ i++; $('#euro').toggleClass('hidden', i%3!==0), $('#pound').toggleClass('hidden',i%3!==1); $('#dollar').toggleClass('hidden',i%3!==2); }); 

Todo lo que hace es eliminar la clase oculta cuando coincida el ciclo (i% 3 === 0) y agregarlo (ocultar esos elementos) de lo contrario.

Si desea cambiar entre varias clases, creo que el primer argumento debería ser una lista de clases separadas por espacios.

http://jsfiddle.net/NWj5w/

http://api.jquery.com/toggleClass/

Suponiendo que no uses esa clase en otro lugar, podrías hacer

 var i = 0, divs = $('.hidden, .shown'); $('#mybutton').click(function() { $('.shown').removeClass('shown').addclass('hidden'); i = (i+1) % divs.length; divs.eq(i).removeClass('hidden').addclass('shown'); }); 

Suponiendo que use esas clases en otro lugar, le recomendaría que cambie su HTML para agregar clases específicas y hacerlo

 var i = 0, divs = $('.specificClass'); $('#mybutton').click(function() { $('.shown').removeClass('shown').addclass('hidden'); i = (i+1) % divs.length; divs.eq(i).removeClass('hidden').addclass('shown'); }); 

Tenga en cuenta que usualmente encuentro que es más sencillo cambiar solo una clase, es decir, dar a todos los elementos la misma clase “específica” y simplemente agregar o eliminar la clase “oculta”.

Mi solución final se basa en la respuesta de Jere anterior, pero es un poco más complicada. Además de mostrar un precio en una moneda y de ocultar la otra, también debo indicar qué moneda se está mostrando y qué otras están disponibles. Por lo tanto mi html termina así:

 Euro Pound Dollar Change Currency 

€ 100

El CSS es:

 .activ {color:#ff0000} .inactiv {color:#CCCCCC} .shown {display:inline} .hidden {display:none} 

El javascript es:

 i=0; $('#change').click(function(){ i++; $('.euro').toggleClass('hidden', i%3!==0); $('.pound').toggleClass('hidden',i%3!==1); $('.dollar').toggleClass('hidden',i%3!==2); $('.euro_h').toggleClass('inactiv', i%3!==0); $('.pound_h').toggleClass('inactiv',i%3!==1); $('.dollar_h').toggleClass('inactiv',i%3!==2); }); 

Duplicar las líneas parece un poco desordenado, pero funciona y mis esfuerzos en algo más racional no lo hicieron. Asi que …..

HTML

  

Euro

JavaScript

 $("#mybutton").on("click", function() { var btns = $(".unit"); var active = btns.filter(".shown").removeClass("shown").next(); active = (active.length) ? active : btns.eq(0) active.addClass("shown"); }); 

Violín

http://jsfiddle.net/g6EM5/

Otro ejemplo de trabajo:

HTML:

  

Euro

Pound

Dollar

JS:

 $('#mybutton').click(function() { for (var i = 0; i < currencies.length; i++) { i == shown ? currencies[i].show() : currencies[i].hide(); } shown = (shown+1)%3; }); 

Violín