removeClass удаление неверного класса

0

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

Состояние должно быть сохранено. Почему этот класс удаляется изначально?

  • 1
    Какого черта это должно делать?
  • 1
    государственный класс должен сохраняться всегда. Только поменяйте звук, вкл, выкл и нет. Все остальное работает отлично.
Показать ещё 2 комментария
Теги:

4 ответа

0
Лучший ответ

Почему этот класс удаляется изначально?

Давайте пройдем его шаг за шагом:

  1. className - это "mute state".

  2. classNames.indexOf("mute state") является -1 поэтому index равен 0.

  3. $(this).removeClass("mute state"); удаляет как mute и state.

  4. classNames[0] возвращается, что является mute. Поскольку вы просто toggleClass mute, toggleClass добавит его обратно.

Конечным результатом является то, что state удаляется.

Вероятно, вы не хотите вызывать removeClass внутри toggleClass а className - не один класс, а строка, содержащая все классы.

Поделиться
0

Вы можете попробовать что-то вроде этого:

    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/

Поделиться
0

Вот моя догадка:

$(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
    ]);
});
Поделиться
0

Вот как я это сделаю:

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню