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>

ボタンをクリックすると、表示/非表示/非表示、非表示/表示/非表示、非表示/非表示/表示の 3 つの状態を循環する 3 つの ID が必要です。これまでのところ、2 つの ID で動作するようにしました (難しくありません!)。

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

これを3番目のIDに拡張する方法がわかりません。どんなアイデアもありがたく受け取った。

4

5 に答える 5

2

toggleClass がどのように機能するかについて混乱している可能性があることを指摘したかっただけです。2 番目のパラメーターは、クラスのような文字列ではありません。代わりに、ブール値です。「表示」クラス (デフォルトで表示される) を取り除き、2 番目の引数にブール値を使用しました。

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

私の最終的な解決策は、上記の 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);
});

行を 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 に答える