Question

我想使用jquery切换类如果指定条件的Else语句。

我的Html默认为css class="horizontal"

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

现在我如何使用jquery在horizontal和vertical之间随机播放我的css类，其中var=mayvar为条件。

myvar may be layout1 or layout2.

<{1>} myvar=layout1的

并为class="horizontal"

如果有更多不同的css类有两个以上的条件，如何编写jquery？

Answer 1

您可以使用toggleClass()中的开关。

确定是否为类的布尔值应该添加或删除。

$('#foo-bar').toggleClass('horizontal', myvar==layout1)
             .toggleClass('vertical', myvar==layout2);

Answer 2

您可以使用toggleClass

<强> Live Demo

HTML 的

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

的Javascript

$('#foo-bar').toggleClass('vertical');

Answer 3

如果您不想使用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')

Answer 4

有toggleClass方法可以做到这一点;它甚至可以使用由空格分隔的多个类名。因此，无论元素的当前类是什么，都要切换它们：

$("#foo-bar").toggleClass("horizontal vertical");

Answer 5

简单案例：

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

仅供参考，将您的“myvar”替换为vh，将vh1替换为完整解决方案

如何使用jquery切换类if else语句？

5 个答案: