3

我想在指定条件下使用 jquery If Else 语句切换类。

我的带有默认 css 的 Htmlclass="horizontal"

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

现在我如何在jquery where作为条件之间horizontal和使用 jquery 之间打乱我的 css 类。verticalvar=mayvar

myvar may be layout1 or layout2.

为myvar=layout1 class="horizontal" 和为myvar="layout2 class="vertical"

如果更多不同的css类有两个以上的条件，如何编写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

如果您不想使用工具类（），这里是另一种解决方案：

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

仅供参考，用你的“myvar”代替 vh 和 vh1 以获得完整的解决方案

于 2013-01-23T16:40:58.930 回答