3

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

<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。任何想法都非常感激。

4

5 回答 5

2

我只是想指出您可能对 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/

于 2013-10-21T15:07:36.897 回答
1

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

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

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

于 2013-10-21T15:00:43.550 回答
1

我的最终解决方案基于上面 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);
});

将线条加倍似乎有点混乱，但它有效，而我在更精简的东西上所做的努力却没有。所以 .....

于 2013-10-21T16:40:14.740 回答
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>

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/

于 2013-10-21T15:09:02.763 回答
0

另一个工作示例：

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

小提琴

于 2013-10-21T15:18:23.560 回答