Question

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

<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循环显示/隐藏/隐藏，隐藏/显示/隐藏和隐藏/隐藏/显示三种状态。到目前为止，我已经使用了两个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最终会像这样：

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

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

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

<强>的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：

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

JS：

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

Fiddle

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

5 个答案: