How to toggle class using jquery if else statement?

Question

I want to toggle class using jquery If Else statement for specified conditions.

My Html with default css class="horizontal"

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

Now How can I shuffle my css class between horizontal and vertical using jquery where var=mayvar as condition.

myvar may be layout1 or layout2.

for myvar=layout1 class="horizontal" and for myvar="layout2 class="vertical"

and how to write the jquery if there are more than two condition for more different css classes?

Solution 1

In case you do not want to use the toogleClass(), here is another solution:

http://jsfiddle.net/YFBWQ/

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

or

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

Solution 2

You can use the switch in toggleClass().

A Boolean value to determine whether the class should be added or removed.

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

Solution 3

You can use toggleClass

Live Demo

Html

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

Javascript

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

Solution 4

There is a toggleClass method that does this; it even works with multiple class names separated by spaces. So toggle both of them, no matter what's the current class of the element:

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

Solution 5

simple case:

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

EDIT ADDED: definative simple case sets it to no classes if none match

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

more complex case:

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: leave the classes alone if none match! (caution, replaces all classes with new set)

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

keep existing:

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

set multiple:

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

FYI, substitue your "myvar" for vh and vh1 for full solution

View more solutions

Comments

[Waihon Yew]

Downvoter: what is wrong with this answer? can you help me improve it?

[galexy]

If there are more than 2 values for "myvar" like layout1, layout2, layout3 and so on.. and different css classes relative to each myvar value,then how can we toggle the css class?

[galexy]

Thanks@Adenko ! your answer is looking fine but its doesn't work for me. css class is remain as it is even myvar=layout2

[adeneo]

be aware that myvar=layout sets the variable, you need a boolean to switch the classes.

[galexy]

Thanks @Mark Schultheiss ! for your valuable answer.