三种切换两种状态（Javascript或jQuery）

我正在制作一个页面，以各种货币（欧元，英镑或美元）显示价格。 我的目标是首先以欧元显示价格，保持英镑和美元价格隐藏。

Change Currency 
Euro
 
Pound
 
Dollar 

单击按钮时，我需要三个ID循环显示/隐藏/隐藏，隐藏/显示/隐藏和隐藏/隐藏/显示三种状态。 到目前为止，我已经使用两个ID（不难！）。

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

我不知道如何将其扩展到第三个id。 任何想法都感激不尽。

Answer 1

我只是想指出你可能对toggleClass如何工作感到困惑。 第二个参数绝不是像类一样的字符串。 相反，它是一个布尔值。 我已经摆脱了“显示”类（默认情况下会显示）并为第二个参数使用布尔值：

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

所有这一切都是在循环匹配时删除隐藏的类（i％3 === 0），否则添加它（隐藏这些元素）。

如果你确实想要在多个类之间切换，我相信第一个参数应该是一个空格分隔的类列表。

http://jsfiddle.net/NWj5w/

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

Answer 2

假设您不在其他地方使用这些课程，您可以这样做

 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'); }); 

假设您在其他地方使用这些类，我建议您更改HTML以添加特定类并执行此操作

 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'); }); 

请注意，我发现通常更简单的是只更改一个类，即为所有元素提供相同的“特定”类，并添加或删除“隐藏”类。

Answer 3

我的最终解决方案基于Jere上面的答案，但有点复杂。 除了以一种货币显示价格并隐藏另一种货币之外，我还需要指出正在显示哪种货币以及哪些货币可用。 因此我的html最终会像这样：

 Euro Pound Dollar Change Currency 
 
 € 100 £ 80 $ 140 

CSS是：

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

javascript是：

 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); }); 

加倍的线条似乎有点凌乱，但它的工作原理和我在更精简的事情上的努力没有。 所以……

Answer 4

HTML

 Change Currency 
Euro
 
Pound
 
Dollar 

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"); }); 

小提琴

http://jsfiddle.net/g6EM5/

Answer 5

另一个工作实例：

HTML：

 Change Currency 
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; }); 

小提琴