CODEWITHSUNDEEP
jqueryhtmlcss
Sii
Sii

Reputation: 1

Add class to multiple divs depending on click event

This is the scenario. My client wants to be able to change the colour theme of the website I'm designing for him. I have 4 divs that, when clicked will change the border-colour of another 4 divs. Each click event will change the divs to a different colour depending on which one was clicked.

I thought using some jQuery would solve it but I must be doing something wrong! Here's what I'm trying to run:

$('.btn1').on('click', function(){
    $('.box').removeClass('colour2, colour3, colour4');
    $('.box').addClass('colour1');
});

$('.btn2').on('click', function(){
    $('.box').removeClass('colour1, colour3, colour4');
    $('.box').addClass('colour2');
});

$('.btn3').on('click', function(){
    $('.box').removeClass('colour1, colour2, colour4');
    $('.box').addClass('colour3');
});

 $('.btn4').on('click', function(){
    $('.box').removeClass('colour1, colour2, colour4');
    $('.box').addClass('colour4');
});

Any help will be greatly appreciated.

Upvotes: 0

Views: 112

Answers (2)

Kierchon
Kierchon

Reputation: 2299

Take the commas out of your remove class

$('.btn1').on('click', function(){
    $('.box').removeClass('colour2 colour3 colour4');
    $('.box').addClass('colour1');
});

$('.btn2').on('click', function(){
    $('.box').removeClass('colour1 colour3 colour4');
    $('.box').addClass('colour2');
});

$('.btn3').on('click', function(){
    $('.box').removeClass('colour1 colour2 colour4');
    $('.box').addClass('colour3');
});

 $('.btn4').on('click', function(){
    $('.box').removeClass('colour1 colour2 colour4');
    $('.box').addClass('colour4');
});

Note: you can just call .removeClass() to get rid of all of the classes but if you have more classes on box than just those three it will delete them all. Read more at http://api.jquery.com/removeClass/

Upvotes: 4

user1636522
user1636522

Reputation:

Read the doc : http://api.jquery.com/removeClass ;)

//$('.box').removeClass('colour2, colour3, colour4');
$('.box').removeClass('colour2 colour3 colour4');

Upvotes: 0

Related Questions