Question

我正在尝试使用类'box'获取多个div来在三个类之间切换：'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');
    }
});

Answer 1

您的元素始终具有类.box，因此它始终会触发初始条件。尝试添加这样的辅助初始类：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;
    }

Answer 2

尝试

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

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

在jQuery中添加和删除类的三种方式切换

2 个答案: