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

【问题标题】：How to toggle class using jquery if else statement?如何使用 jquery if else 语句切换类？
【发布时间】：2013-01-07 04:06:49
【问题描述】：

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

我的带有默认 css 的 Html class="horizontal"

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

现在我如何使用 jquery 在 horizontal 和 vertical 之间改组我的 css 类，其中 var=mayvar 作为条件。

myvar may be layout1 or layout2.

对于myvar=layout1 class="horizontal" 对于myvar="layout2 class="vertical"

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

【问题讨论】：

“myvar”从何而来？输入？
这个来自我的wordpress选项设置，不用担心。我实现了它并成功地将我的选项值存储在 myvar 中，并使用 alert(myvar);
这是两个问题，因此我的提交中有两个答案

标签： jquery css if-statement

【解决方案1】：

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

一个布尔值，判断类是否应该添加或删除。

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

【讨论】：

如果“myvar”的值超过 2 个，例如 layout1、layout2、layout3 等等.. 以及相对于每个 myvar 值的不同 css 类，那么我们如何切换 css 类？
谢谢@Adenko！您的答案看起来不错，但对我不起作用。 css 类保持不变，甚至 myvar=layout2
注意myvar=layout设置了变量，你需要一个布尔值来切换类。

【解决方案2】：

如果您不想使用 togleClass()，这里有另一种解决方案：

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')

【讨论】：

【解决方案3】：

你可以使用toggleClass

Live Demo

HTML

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

Javascript

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

Downvoter：这个答案有什么问题？你能帮我改进一下吗？

【解决方案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 代替完整的解决方案

【讨论】：

感谢@Mark Schultheiss！为您提供宝贵的答案。