3

指定した条件で jquery If Else ステートメントを使用してクラスを切り替えたい。

デフォルトのCSSを使用した私のHtmlclass="horizontal"

<div id="foo-bar"  class="my-item horizontal"> 
</div>

条件としてjquery where を使用しhorizontalてcss クラスをシャッフルするにはどうすればよいですか。verticalvar=mayvar

myvar may be layout1 or layout2.

myvar=layout1 class="horizontal" とのためにmyvar="layout2 class="vertical"

より多くの異なるcssクラスに対して2つ以上の条件がある場合、jqueryをどのように書くのですか?

4

5 に答える 5

8

toggleClass()でスイッチを使用できます。

クラスを追加するか削除するかを決定するブール値。

$('#foo-bar').toggleClass('horizontal', myvar==layout1)
             .toggleClass('vertical', myvar==layout2);
于 2013-01-23T16:00:12.653 に答える
2

トグルクラスを使用できます

ライブデモ

HTML

<div id="foo-bar"  class="horizontal"> </div>

Javascript

$('#foo-bar').toggleClass('vertical');
于 2013-01-23T15:58:03.163 に答える
2

toogleClass() を使用したくない場合は、別の解決策を次に示します。

http://jsfiddle.net/YFBWQ/

$('#foo-bar')
.removeClass('horizontal vertical')
.addClass( myvar=='layout2' ? 'vertical' : 'horizontal')

また

$('#foo-bar')
.removeClass(myvar=='layout2' ? 'horizontal' : 'vertical')
.addClass(myvar=='layout2' ? 'vertical' : 'horizontal')
于 2013-01-23T17:15:10.950 に答える
1

これを行うtoggleClass方法があります。スペースで区切られた複数のクラス名でも機能します。したがって、要素の現在のクラスに関係なく、両方を切り替えます。

$("#foo-bar").toggleClass("horizontal vertical");
于 2013-01-23T15:57:39.793 に答える
1

簡単なケース:

var vh = "layout1";
$('#foo-bar').addClass(function () {
    $(this).prop('class', '');
    return vh == 'layout1' ? 'horizontal' : 'vertical';
});

編集が追加されました:決定的な単純なケースは、一致するものがない場合、クラスに設定しません

var vh = "layout9";
$('#foo-bar').prop('class',function () {
    return vh == 'layout1' ? 'horizontal' : (vh == "layout2" ? 'vertical' : (vh=="layout3" ? "reddy" : ""));
});

より複雑なケース:

var vh1 = "layout2";
var classList = $('#foo-bar').prop('class').split(/\s+/);
$('#foo-bar').addClass(function (vh1) {
    var self = this;
    $.each(classList, function (index, item) {
       //IF you want to keep one, check it here
       if (item != "keepme") {
          $(self).removeClass(item);
       }
    });
    switch (vh1) {
        case "layout1":
            return "horizontal";
        case "layout2":
            return "vertical";
        default:
            return "reddy";
    }
});

EDIT2: 一致するものがない場合は、クラスをそのままにしておきます! (注意、すべてのクラスを新しいセットに置き換えます)

<div id="foo-bar" class='reddy3 freddy' >hi</div>

存在し続ける:

var vh = "nomatches";
$('#toggle').prop('class',function (i,v) {
    return vh == 'layoutA' ? 'horizontal' : (vh == "layout2" ? 'vertical' : (vh=="layout3"? "reddy":v));
});// keeps "reddy3 freddy"

複数設定:

var vh = "greenhorizontal";
$('#toggle').prop('class',function (i,v) {
    return vh == 'layout2' ? 'horizontal' : (vh == "layout2" ? 'vertical' : (vh=="greenhorizontal"? "greeny horizontal":v));
});//sets both "greeny" and "horizontal", wipes out existing

参考までに、vh を「myvar」に、完全なソリューションを vh1 に置き換えてください

于 2013-01-23T16:40:58.930 に答える