How to switch between classes using addClass and removeClass?

Question

I create my own jQuery Switcher, and I want to delete the class when I click on a different color, for example: I have a “blue” class in the body tag, and when someone clicks on the red one, delete the blue class and replace it with the 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/

Answer 1

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

Secondly, to achieve what you need, you can provide a list of all classes that will be removed with removeClass , before adding a new class with addClass . Try the following:

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

Updated script

However, this can be a little difficult if colors are added or removed. A better option would be to call one function to set the classes in the body element whenever an option is selected or a color is pressed. Try the following:

 $(".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 script

Answer 2

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

 // 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/

Answer 3

use the removeClass() method to remove existing classes and call addClass() to add a 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 classes.

More simplified version

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

Be sure to enter the code inside the document.ready event

Answer 4

Add all data_color to the array, and then click on the color to remove the entire class from the body located in the array. After that, add a new class as shown below.

 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 script: https://jsfiddle.net/p18cqa5s/5/