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

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

我的HTML与默认的CSS class="horizontal"

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

现在我该如何洗牌horizontal和vertical之间我的CSS类使用jQuery其中var=mayvar为条件。

myvar may be layout1 or layout2.

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

，以及如何，如果有两个以上的条件更多不同的CSS类写的jQuery？

来源

2013-01-23 galexy

哪里是 “MYVAR” 是从哪里来的？一个输入？ – Adunahay

这来自我的WordPress的选项设置，不要担心它。我实现了它，并成功将我的选项值存储在myvar中，并通过alert（myvar）进行检查; – galexy

这是两个问题，因此我提交的两个答案 –

如果您不想使用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-23 17:15:10 leoinfo

有一个toggleClass这样做的方法;它甚至适用于由空格分隔的多个类名称。因此，切换他们两个，不管是当前类的元素：

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

来源

2013-01-23 15:57:39 Jon

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

您可以使用toggleClass

Live Demo

的Html

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

的Javascript

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

来源

2013-01-23 15:58:03 Adil

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

一个布尔值，用于确定是否应该添加或删除类。

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

来源

2013-01-23 16:00:12 adeneo

如果“myvar”比layout1，layout2，layout3等多于2个值，以及与每个myvar值相关的不同css类，那么我们如何切换css类？ – galexy

谢谢@ Adenko！你的答案看起来不错，但它对我不起作用。 css类保持原样，即使myvar = layout2 – galexy

请注意'myvar = layout'设置变量，您需要一个布尔值来切换类。 – adeneo

简单的例子：

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

编辑新增：definative简单的情况下，将其设置为无类，如果没有匹配

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"; 
    } 
});

编辑2：如果没有匹配，就让这些类独自一人！（注意，替换所有类新集）

<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

仅供参考，substitue你的 “MYVAR” 为VH和VH1全解决方案

来源

2013-01-23 16:40:58

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

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

回答

相关问题