Javascript 在jQuery中添加和删除类的三向切换

我试图让多个div类“box”在三个类之间切换：“box”、“box black”和“box blue”。我的设置方式有些不太合适。谢谢你的帮助

$('.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');
    }
});

试一试

---

首先检查元素是否有类框。如果是这样，您可以在第二个类（黑色、蓝色和无类）之间切换。

您的元素始终具有类

.box

，因此它将始终触发初始条件。尝试添加一个二级初始类，如下所示：

HTML

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

CSS

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

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

---

使用

.hasClass（）

而不是

.class

检查元素是否具有该类@DhavalMarthak使用.hasClass（）而不是类它几乎可以工作。。。我只是被黑色粘住了，没有换成蓝色。这是因为你的代码总是在if条件下首先触发

，并将class black添加到点击的
div
！看，我在css中也做了更改！我希望你需要这个。
    $('.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');
        }
    });

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

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