Переключить класс элемента с помощью jQuery?

Question

У меня возникли проблемы с этим кодом

$("#click").bind('mousedown mouseup mouseover', function(e) {
    if(e.type === 'mouseover'){
        $(this).addClass('open'); //works!
    }
    if(e.type === 'mousedown'){
       $(this).removeClass().addClass('closed'); //works!
    }
    if(e.type === 'mouseup'){
       $(this).removeClass().addClass('open');
       // The above line doesn't work :(
    }
});

Демо здесь Этот код работает только для mouseover, mousedown и NOT для mouseup. Когда я раскомментирую $(this).removeClass().addClass('open');, событие mousedown также перестает срабатывать.

Кто-нибудь знает, в чем может быть проблема?

Answer 1

Исправлено: http://jsfiddle.net/U544t/2/

Вам нужно удалить класс, который вам не нужен, а затем добавить класс, который вы делаете. У вас получилось, что div имеет и open, и closed, поэтому он показывал только закрытый значок.

Answer 2

Если я что-то упускаю, кажется, вы могли бы сделать это немного более эффективно с помощью toggleClass () вместо того, чтобы делать все операции добавления / удаления самостоятельно.И вам, вероятно, не нужны два класса, просто состояние по умолчанию и класс .open для запуска активного при переключении.