Если классы установлены правильно с самого начала, вы можете использовать .toggleClass()
[документы] :
$('#ui-block-a').toggleClass('visuallyhidden ui-block-a');
В противном случае, если вы явно хотите добавить / удалить классы, вы можете использовать .toggle()
:
$('#button').toggle(function() {
$('#ui-block-a').removeClass('visuallyhidden').addClass('ui-block-a');
}, function(){
$('#ui-block-a').addClass('visuallyhidden').removeClass('ui-block-a');
});
Почему ваш код не работает:
Вы не настраиваете обратный вызов. Вы выполняете два оператора через оператор запятой . Первая часть ($('#ui-block-a').addClass('...').removeClass('...')
) будет выполнена как положено. Вторая часть (function() {...}
) будет оцениваться как выражение функции , а результат, функция, будет возвращен как общий результат оператора. Но вы не назначаете результат чему-либо, поэтому он просто игнорируется.
например. если бы вы сделали
// form is like `var foo = x, y;`
var foo = $('#ui-block-a').removeClass('...').addClass('...'), function(){
$('#ui-block-a').addClass('...').removeClass(...');
};
тогда foo
будет относиться к функции
function() {
$('#ui-block-a').addClass('...').removeClass('...');
}
Но это не то, что вы хотите в любом случае. Таким образом, размещение функции здесь является законным, но не имеет специального значения и, следовательно, не имеет никакого эффекта.