web-dev-qa-db-ja.com

2つの異なるクラスjQuery間の切り替え

次のコードを機能させるのに問題があります：

$('#changeMode').button().click(function(){
    $('#playfield').toggle(function() {
        $(this).switchClass("gridView","plainView");
    }, function() {
        $(this).switchClass("plainView","gridView");
   });      
});

次のdivのクラスを切り替えることができません。

<div id="playfield" class="gridView"></div>

何か案は？

編集：私はこれを試しました：

$('#changeMode').button().click(function(){
    if ($('#playfield').attr('class') == "gridView"){
        $('#playfield').removeClass("gridView");
        $('#playfield').addClass("plainView");
    } else {
        $('#playfield').removeClass("plainView");
        $('#playfield').addClass("gridView");
    }
});

そして、それはうまくいくようです、一体何ですか？

javascriptjqueryclassjquery-ui
19
Yottagray

私はswitchClassに気づいていませんでした、おそらくあなたはtoggleClassを考えていましたか？とにかく-私はこれを使用する古いコードをいくつか持っていました（toggleClassでいくつかの奇妙な問題がありました）：

$(this).removeClass("gridView").addClass("plainView"); 

or

$(this).toggleClass("gridView plainView");

およびその逆。

例：

$('#changeMode').button().click(function(){
    $('#playfield').toggle(function() {
        $(this).toggleClass("gridView plainView");
        //$(this).removeClass("gridView").addClass("plainView"); 
    }, function() { 
        $(this).toggleClass("plainView gridView");
        //$(this).removeClass("plainView").addClass("gridView"); 
   });      
});

しかし、他の人はtoggleClassがあなたのニーズに合うはずだと示唆しています。

40
Rion Williams

正しい構文は、「スペースで区切られた1つ以上のクラス名（）」を使用することです（from 。toggleClass（） =）1番目と2番目のパラメーターでクラス名を引用するのではなく、最初のパラメーター内。

例えば.

$(this).toggleClass("gridView plainView");
8
Guy

toggleClassを2回使用するだけで魔法がかかります。 JQueryへのtoggoleClass参照
_This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added._

あなたの問題は。

$('#changeMode').button().click(function(){ $(this).toggleClass('gridView').toggleClass('plainView'); });

これはあなたの問題を解決するのに役立ちます。

@Guy toggleClass('gridView plainView')これは実際には代替になります
_<div class="gridView plainView"> and <div class=" ">._と2つのクラスの間で切り替えません。悪気ない 。これが助けになることを願っています。

4
Adams.H

jQueryにはtoggleClass APIもあります。

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

これはRionmonsterが提案したのと同じように機能し、クラスに設定されていない場合はクラスを追加し、すでに設定されている場合は削除します。

2
Jeremy Whitlock