Javascript removeClass删除不正确的类

国家应该得到保护。为什么最初删除该类

为什么最初删除该类

让我们一步一步地看一遍：

className

是

“静音状态”

classNames.indexOf（“静音状态”）

是

-1

，因此

index

是

0

$（this.removeClass（“静音状态”）同时删除
静音
和
状态

classNames[0]

返回，即

mute

。由于您刚刚删除了

mute

，

toggleClass

将再次添加它

最终结果是

状态

被删除

---

---

您可能不想在

toggleClass

内部调用

removeClass

，

className

不是一个类，它是一个包含所有类的字符串。

您可以尝试以下方法：

    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];
        });
    });

---

你是说像上面这样的东西吗

我会这样做：

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]);
});

以下是我的猜测：

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

还有一个演示：

---

奖金：

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
    ]);
});

---

这到底是怎么回事？state类应该一直保留。仅更改静音、开、关和无。其他一切正常。

className

包含标记的所有类。。。在classNames数组中获取它的索引会破坏您的代码，我将向classNames添加状态。状态静音，状态开启。。。

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
    ]);
});