Question

http://jsfiddle.net/a86C3/

    var classNames = ['mute', 'on', 'off', 'none'];
    $('.state').click(function () {

        $(this).toggleClass(function (i, className) {
            var index = (classNames.indexOf(className) + 1) % classNames.length;

            alert(className);
            $(this).removeClass(className);

            return classNames[index];
        });
    });

应该保留.state。为什么最初要删除这个类？

Answer 1

为什么最初要移除此类？

让我们一步一步地完成它：

className为"mute state"。
classNames.indexOf("mute state")为-1，因此index为0。
$(this).removeClass("mute state");删除了mute和state。
返回classNames[0]，即mute。由于您刚刚删除了mute，toggleClass会将其重新添加回来。

最终结果是删除了state。

您可能不想在removeClass内调用toggleClass，而className不是单个类，它是一个包含所有类的字符串。

Answer 2

您可以尝试这样的事情：

    var classNames = ['mute', 'on', 'off', 'none'];
    var counter = -1;
    var newClass, oldClass;
    $('.state').click(function () {

        $(this).toggleClass(function (i, className) {
            counter++;

            oldClass = newClass || classNames[counter % classNames.length];
            newClass = classNames[counter % classNames.length];

            $(this).removeClass(oldClass);

            return classNames[counter % classNames.length];
        });
    });

你是说上面的东西吗？ http://jsfiddle.net/Dieterg/a86C3/1/

Answer 3

我将如何做到这一点：

var classNames = ['mute', 'on', 'off', 'none'];
$('.state').on('click', function () {
    var k = 0, self = this;

    $.each(classNames, function (i, klass) {
        if ($(self).hasClass(klass)) k = i;
    });

    $(this).removeClass(classNames[k]).addClass(classNames[k==(classNames.length-1) ? 1 : 1+k]);
});

FIDDLE

Answer 4

这是我的猜测：

$(this).toggleClass(function (i, className) {       
    className = className.match(new RegExp(
        '(?:^|\\s)(' + classNames.join('|') + ')(?=\\s|$)'
    ))[1];
    $(this).removeClass(className);
    return classNames[
        (classNames.indexOf(className) + 1) % classNames.length
    ];
});

演示：http://jsfiddle.net/wared/QZ8Kh/。

奖金：

var classNames = ['mute', 'on', 'off', 'none'];
$('.state').click(function () {
    var className = $(this).attr('class').match(new RegExp(
        '(?:^|\\s)(' + classNames.join('|') + ')(?=\\s|$)'
    ))[1];
    $(this).toggleClass(className + ' ' + classNames[
        (classNames.indexOf(className) + 1) % classNames.length
    ]);
});

removeClass删除不正确的类

4 个答案: