How to add 2 different classes using if in jquery

Question

How to add 2 different classes using jquery?

I have this code:

<div id="divprincipal" class="divprincipal">
    <div id="div1" class="max"></div>
</div>

var clase1 = $('#hola').attr('class');
$(document).ready(function () {
    $("#hola").click(function () {
        $("#divprincipal").animate({
            height: "30px"
        }, 1000);
        $("#hola").addClass("min");
        alert(clase1);
        if (clase1 == "min") {
            $("#divprincipal").animate({
                height: "200px"
            }, 1000);
            $("#hola").addClass("max");
            alert(clase1);
        }
    });
});

I added an alert to know what's the current class and i keep returning the same class

You are changing the jQuery element, but not clase1 that's why — Sterling Archer
– Sterling Archer, Commented Jan 30, 2014 at 21:46
You probably want to use .hasClass for the test: api.jquery.com/hasclass — Felix Kling
– Felix Kling, Commented Jan 30, 2014 at 21:47
Why do you want to add the class min to #hola and then immediately test if it's there? — Blazemonger
– Blazemonger, Commented Jan 30, 2014 at 21:52
Btw, if you want to toggle between two classes you could use .toggleClass('min max'); — Ja͢ck
– Ja͢ck, Commented Jan 30, 2014 at 23:57

Travis J · Accepted Answer · 2014-01-30 22:13:25Z

1

clase1 is defined prior to the change, and is not a live collection (such as a NodeList) as some reference values in javascript will be. It is just a primitive string.

In order to determine if that class is present, you will need to check again instead of referencing the stored value

var clase1 = $('#hola').attr('class');
$(document).ready(function(){
 $("#hola").click(function(){
  $("#divprincipal").animate({ height:"30px"}, 1000);
  $("#hola").addClass("min");
  clase1 = $('#hola').attr('class');
  alert(clase1);
    if (clase1=="min"){
        $("#divprincipal").animate({ height:"200px"}, 1000);
        $("#hola").addClass("max");
        alert(clase1);
    }
 });
});

Moreover, you may wish to also use jQuery to detect if this class is present instead of looking to see if the whole class name is the same as "min" using hasClass.

if( $('#hola').hasClass('min') )
{
 //conditional code
}

edited Jan 30, 2014 at 22:13

answered Jan 30, 2014 at 21:46

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jose Angel · Accepted Answer · 2014-01-30 21:52:21Z

1

If you want to add two classes to same element yo need to do this:

$("#hola").addClass("max min");

answered Jan 30, 2014 at 21:52

Jose Angel

3286 silver badges18 bronze badges

1 Comment

Jesus Mendoza Over a year ago

Thanks for your fast answer, but that's not was i was looking for. I appreciate your help tho.

Collectives™ on Stack Overflow

How to add 2 different classes using if in jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related