Three way toggle to add and remove classes in jQuery

Question

I'm trying to get multiple divs with the class 'box' to switch between three classes: 'box', 'box black', and 'box blue' when I click on them. Something isn't quite working with how I have it set up. Thanks for your help!

$('.box').click(function () {
    if ($(this).class == 'box') {
        $(this).addClass('black');
    } else if ($(this).class == 'box black') {
        $(this).removeClass('black');
        $(this).addClass('blue');
    } else if ($(this).class == 'box blue') {
        $(this).removeClass('blue');
    }
});

use .hasClass() instead of .class to check whether the element has that class or not! — Dhaval Marthak
– Dhaval Marthak, Commented Jun 5, 2015 at 16:55
@DhavalMarthak With the .hasClass() instead of class it almost works... I just gets stuck on the black and doesn't change to blue. jsfiddle here . — spencer.sm
– spencer.sm, Commented Jun 5, 2015 at 17:04
It's because your code will always fire first if condition and will addClass black to the clicked div! — Dhaval Marthak
– Dhaval Marthak, Commented Jun 5, 2015 at 17:09
See this i've made changes in css too! I hope you needed this. — Dhaval Marthak
– Dhaval Marthak, Commented Jun 5, 2015 at 17:10

wrxsti · Accepted Answer · 2015-06-05 17:48:46Z

2

Your element always has the class .box so it will always trigger the initial condition. Try added a secondary initial class like this: DEMO

HTML

<div class="box none"></div>

jQuery

    $('.box').click(function () {
        if ($(this).hasClass('none')) {
            $(this).removeClass('none');
            $(this).addClass('black');
        } else if ($(this).hasClass('black')) {
            $(this).removeClass('black');
            $(this).addClass('blue');
        } else if ($(this).hasClass('blue')) {
            $(this).removeClass('blue');
            $(this).addClass('none');
        }
    });

CSS

   .box {
        border: solid 1px;
        width: 100px;
        height: 100px;
        background: #fff;
    }

    .black {
        background: #000;
    }
    .blue {
        background: blue;
    }

edited Jun 5, 2015 at 17:48

answered Jun 5, 2015 at 17:14

wrxsti

3,4941 gold badge21 silver badges30 bronze badges

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

Comments

Barry · Accepted Answer · 2015-06-05 17:12:33Z

0

Try

$('.box').click(function () {
    if ($(this).hasClass('box')) {
        if ($(this).hasClass('black')) {
            $(this).removeClass('black').addClass('blue');
        } else if ($(this).hasClass('blue')) {
            $(this).removeClass('blue');
        } else {
            $(this).addClass('black');
        }
    }
});

First you check if the element has class box. If so, you toggle between the second classes (black, blue an no class).

answered Jun 5, 2015 at 17:12

Barry

3,7331 gold badge20 silver badges25 bronze badges

Collectives™ on Stack Overflow

Three way toggle to add and remove classes in jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related