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

我在一个页面上工作，该页面将显示货币选择（欧元、英镑或美元）的价格。我的目标是先用欧元显示价格，隐藏英镑和美元的价格

<button id="mybutton">Change Currency</button>
<p id="euro" class="shown">Euro</p>
<p id="pound" class="hidden">Pound</p>
<p id="dollar" class="hidden">Dollar</p>

---

我不知道如何将此扩展到第三个id。感谢您收到的任何想法。

如果您不在其他地方使用这些类，您可以这样做

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

---

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

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

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），否则添加它（隐藏那些元素）

如果您确实想在多个类之间切换，我认为第一个参数应该是一个以空格分隔的类列表

HTML

<button id="mybutton">Change Currency</button>
<p id="euro" class="unit shown">Euro</p>
<p id="pound" class="unit hidden">Pound</p>
<p id="dollar" class="unit hidden">Dollar</p>

小提琴

---

另一个工作示例：

HTML:

更改货币
欧元
磅
美元

JS:

$（'#mybutton'）。单击（函数（）{
对于（变量i=0；i

---

我的最终解决方案是基于上面Jere的答案，但有点复杂。除了显示一种货币的价格并隐藏另一种货币的价格外，我还需要指出显示的是哪种货币，还有哪些其他货币可用。因此，我的html结果如下：

<span class="euro_h activ">Euro</span> 
<span class="pound_h activ inactiv">Pound</span> 
<span class="dollar_h activ inactiv">Dollar</span> 
<span id="change" style="cursor:pointer">Change Currency</span>
<br>
<br>
<span class="euro shown">€ 100</span>
<span class="pound hidden">£ 80</span>
<span class="dollar hidden">$ 140</span>

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

---

将线路加倍似乎有点混乱，但它起作用了，而我在更精简的方面的努力没有起作用。所以……

太棒了！10分钟内回答4个问题。答案来得比我读得快。Jere，你完全正确：我对toggleclass（）感到困惑。我现在明白了，它可以打开和关闭一个类（或多个类）；它不会在类之间交换。我选择了Jere的答案而不是其他答案，因为我发现它更容易适应稍微复杂一点的版本，这是我最后一页所需要的。我在底部添加了一个答案，以显示我最终的结局。谢谢大家。

<button id="mybutton">Change Currency</button>
<p class="currency euro">Euro</p>
<p class="currency pound">Pound</p>
<p class="currency dollar">Dollar</p>

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

<span class="euro_h activ">Euro</span> 
<span class="pound_h activ inactiv">Pound</span> 
<span class="dollar_h activ inactiv">Dollar</span> 
<span id="change" style="cursor:pointer">Change Currency</span>
<br>
<br>
<span class="euro shown">€ 100</span>
<span class="pound hidden">£ 80</span>
<span class="dollar hidden">$ 140</span>

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

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