Remove/Add multiple Classes stuffed in a variable jquery

Question

Could someone please help me this problem I am having, I want to be able to change the background of the body on click on a bunch of list items. The body itself always has two classes that can't be removed.

HTML:

<body class="bodyclass1 bodyclass2"> <ul> <li class="red"><div class="colorme">red</div></li> <li class="blue"><div class="colorme">blue</div></li> <li class="green"><div class="colorme">green</div></li> <li class="brown"><div class="colorme">brown</div></li> </ul> </body>

Css:

body.red{ background: red } body.blue{ background: blue } body.green{ background: green } body.brown{ background: brown }

JQuery:

<script language="javascript"> $.noConflict(); jQuery( document ).ready(function( $ ) { $( ".colorme" ).on('click',function(){ var allKleur = $('.red, .blue, .green, .brown'); var colorDad = $(this).parents('li:eq(0)').attr('class'); $('body').removeClass(allKleur).addClass(colorDad); }); }); </script>

What happens with this code is ti does add the class from the variable of the parent clicked on, but it doesn't remove the classes, leaving it just with the one that was clicked on.

It did work this way:

$('body').removeClass().addClass(colorDad);

but then it removed all the classes the body tag already has, and which shouldn't be removed.

Any help in the right direction would be much appreciated, thanks.

Vlad Cazacu · Accepted Answer · 2014-08-01 15:25:11Z

removeClass() expects a string, not a jQuery object. Try the following:

var allKleur = 'red blue green brown';

Edit: added improvements

<script language="javascript"> $.noConflict(); jQuery( document ).ready(function( $ ) { var allKleur = 'red blue green brown'; var $body = $('body'); $( ".colorme" ).on('click',function(){ $body.removeClass(allKleur).addClass( $(this).data('class') ); }); }); </script>

I made a few small improvements:

moved the allKleur and $body vars outside the click event because they don't need to be redeclared on each click
i suggest adding a data-class attribute on the colorme divs. This way you don't need to call the parents() method and you are not dependent on the parent li's class, which might change.

Thank you very much, that worked perfectly. great solutions! Just a quick question, the code makes sense the way it's been put, or would there be a cleaner way?

nsthethunderbolt · Accepted Answer · 2014-08-01 14:33:28Z

0

Going by your way, you can do this:

 $( ".colorme" ).on('click',function(){ var toAddClass=$(this).parent().attr('class'); $('body').removeClass('red blue green brown').addClass(toAddClass); });

answered Aug 1, 2014 at 14:33

nsthethunderbolt

2,0951 gold badge17 silver badges24 bronze badges

1 Comment

prettyInPink Over a year ago

this can be done, but I would much rather like to have the classes within a variable, as I would have to do some more stuff with it later. thanks for your answer.

CristiC777 · Accepted Answer · 2014-08-01 14:41:51Z

0

test the demo
like some0ne told you before .. use

 $('.colorme').on('click',function(){ alert('clicked'); var toAddClass=$(this).parent().attr('class'); $('body').removeClass('red blue green brown').addClass(toAddClass); });

answered Aug 1, 2014 at 14:41

CristiC777

48111 silver badges21 bronze badges

2 Comments

prettyInPink Over a year ago

this can be done, but I would much rather like to have the classes within a variable, as I would have to do some more stuff with it later. thanks for your answer.

CristiC777 Over a year ago

Ok! you have a nice solution provided by Vlad !

Collectives™ on Stack Overflow

Remove/Add multiple Classes stuffed in a variable jquery

3 Answers 3

1 Comment

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Related