Changing from some CSS classes to others ones using jQuery .click with out toggling?

Question

With the click of two buttons, I want to switch between two states, let's say state a and state b.

So I got two buttons:

<button id="btnA"> and <button id="btnB">

I also got some divs: bars, fx and table with some initial classes given. Let's say some classes are for state a and some for state b.

So when I click btnA I want the divs to get only the classes meant for state a and so when click btnB make the divs get only the classes meant for state b.

The problem here is that I really don't want switching or toggling, whatever similarities have.

I tried this:

$("#btnA").click(function() {

    $(this).removeClass("btn-default")
    $(this).addClass("btn-success")

    $("#btnB").removeClass("btn-success")
    $("#btnB").addClass("btn-default")

    $("#table").remove()
    $("#bars").switchClass("barsdiferencias barslagrange")
    $("#fx").switchClass("fxdiferencias fxlagrange")
})

$("#btnB").click(function() {

    $(this).removeClass("btn-default")
    $(this).addClass("btn-success")

    $("#btnA").removeClass("btn-success")
    $("#btnA").addClass("btn-default")  


    $("#graficos").append('<div id="table" class="table"></div>')
    $("#bars").switchClass("barslagrange barsdiferencias")
    $("#fx").switchClass("fxlagrange fxdiferencias")        

})

I have tried using switchClass and toggleClass but they don't do what I want. I know removing the unwanted classes and adding the proper ones at each function would make it. But, is there any fancier and shorter code solution?

I'm not sure I completely follow the question. Is it something like this: jsfiddle.net/X6sn3 — Chase
– Chase, Commented Mar 17, 2014 at 6:21
have you considered just putting one single "state" class on a containing element of all of those elements, and styling them based on that one class? — Damon Smith
– Damon Smith, Commented Mar 17, 2014 at 6:21
I'm new to CSS, can I define something like that for multiple DOM elements? — diegoaguilar
– diegoaguilar, Commented Mar 17, 2014 at 6:29

A J · Accepted Answer · 2014-03-17 06:52:29Z

1

Try This

This just replaces the current class with the new one that you give in as parameter. The attr() method can be used to change any property of a tag.

    $(this).attr("class","btn-success")

    $("#btnA").attr("class","btn-default")

To add more classes

    $(this).attr("class","classA classB")

edited Mar 17, 2014 at 6:52

answered Mar 17, 2014 at 6:21

A J

2,14015 silver badges24 bronze badges

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

7 Comments

diegoaguilar Over a year ago

What when it comes to change between more than one?

A J Over a year ago

you mean to add more classes?

diegoaguilar Over a year ago

Yes, exactly, for adding more than one class

A J Over a year ago

to add more classes .attr("class","classA classB") .. have ediited my answer too

A J Over a year ago

Yes it will just replace the class property

|

Collectives™ on Stack Overflow

Changing from some CSS classes to others ones using jQuery .click with out toggling?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related