How to switch between Class using addClass & removeClass?

Question

I create my own Switcher jQuery, and I want to remove class when click on another color, for example : I have "blue" class on body tag and when someone click on red should remove the blue class and replace it with red class etc..

Code :

$("body").addClass("wide light blue");

// Switcher jQuery Plugin
$(".switcher-toggle").click(function() {
    $("#switcher").toggleClass("open");
});

// Theme Layout Switch
$(".layout").change(function() {
    var layout = $(".layout").val();
    $(".wrapper").css("width",layout);
});

// Theme Skins Switch
$(".skins").change(function() {
    var skin = $(".skins").val();
    $("body").toggleClass(skin);
});

// Theme Colors Switch
$(".colors span").each(function() {
     var data_color = $(this).attr("data-color");
     $(this).click(function() {
         $("body").toggleClass(data_color);
     });
});

Demo : https://jsfiddle.net/uikithemes/p18cqa5s/

You're not really using the `wide` and `light` classes for anything, so just removing all classes seems like it should work -> https://jsfiddle.net/adeneo/p18cqa5s/6/ — adeneo, Dec 19 '15 at 18:44

Rory McCrossan · Accepted Answer · 2015-12-19T18:33:19.600

Firstly, note that the each() loop is redundant as you can access the data-color attribute directly within the click handler.

Secondly, to achieve what you require you can provide a space-delimited list of all the classes to be removed using removeClass before adding the new class with addClass. Try this:

$(".colors span").click(function() {
    $("body")
        .removeClass('blue red green orange carrot violet pink gold')
        .addClass($(this).data("color"));
});

Updated fiddle

However this may become a little difficult to maintain if colours are added or removed. A better pattern would be to call a single function to set the classes on the body element whenever an option is chosen or a colour is clicked. Try this:

$(".skins, .layout").change(applyClasses);
$(".colors span").click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    applyClasses();
});

function applyClasses() {
    var classes = [
        $(".skins").val(),
        $(".layout").val(),
        $(".colors span.active").data('color')
    ];

    $('body').removeClass().addClass(classes.join(' '));
}

applyClasses(); // on load

Updated fiddle

The first method is work fine for me, Thank you so much you save my project :) this is my new demo now : [link](https://jsfiddle.net/uikithemes/p18cqa5s/18/) — Mutamiz Team, Dec 19 '15 at 19:35
Glad to help. I would suggest you use the second method though, as it's far more extensible. — Rory McCrossan, Dec 19 '15 at 22:34

score 2 · Answer 2 · answered Dec 19 '15 at 18:28

Try removing set color from body element className using .split() , with parameter " " , .slice() with parameter -1 to select last className set on body before calling .toggleClass() to set new color ; also adding true to .toggleClass() to prevent removing class if same color swatch clicked in succession

// Theme Colors Switch
$(".colors span").each(function() {
     var data_color = $(this).attr("data-color");
     $(this).click(function() {
         $("body").removeClass(document.body.className.split(" ").slice(-1)[0])
         .toggleClass(data_color, true);
     });
});

jsfiddle https://jsfiddle.net/p18cqa5s/3/

Thank you so much for your help :) – Mutamiz Team Dec 19 '15 at 19:41 — Mutamiz Team, Dec 19 '15 at 19:41

Shyju · Answer 3 · 2015-12-19T18:26:14.883

1

use the removeClass() method to remove the existing classes and call addClass() to add the new class.

// Theme Colors Switch
$(".colors span").each(function() {
     var data_color = $(this).attr("data-color");
     $(this).click(function() {
        $("body").removeClass().addClass(data_color);            
     });
});

removeClass() method without any parameters will remove all the classes.

More simplified version

$(".colors span").click(function(e){
  e.preventDefault();
  $("body").removeClass().addClass($(this).attr("data-color"));
})

Make sure to put your code inside document.ready event

edited Dec 19 '15 at 18:26

answered Dec 19 '15 at 18:23

Shyju

214,206
104
411
497

Note that the `body` will have classes added to it from the `change` events on the `select` elements. Using `removeClass` would eliminate those as well as the colour classes. – Rory McCrossan Dec 19 '15 at 18:26
Thank you so much for your help :) – Mutamiz Team Dec 19 '15 at 19:41

score 1 · Answer 4 · answered Dec 19 '15 at 18:37

Add all data_color to an array and then on click of color remove all class from the body which are in the array. After that add new class like following.

var data_color= [];
// Theme Colors Switch
$(".colors span").each(function() {
     data_color.push($(this).attr("data-color"));
     $(this).click(function() {
         $("body").removeClass(data_color.join(' ')).addClass($(this).attr("data-color"));
     });
});

Updated Fiddle: https://jsfiddle.net/p18cqa5s/5/

Thank you so much for your help :) – Mutamiz Team Dec 19 '15 at 19:41 — Mutamiz Team, Dec 19 '15 at 19:41

How to switch between Class using addClass & removeClass?

4 Answers4