クラスが最初から正しく設定されている場合は、 .toggleClass()
[docs]を使用できます。
$('#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');
});
コードが機能しない理由:
コールバックを設定していません。コンマ演算子を使用して2つのステートメントを実行しています。最初の部分($('#ui-block-a').addClass('...').removeClass('...')
)は期待どおりに実行されます。2番目の部分( )は関数式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('...');
}
しかし、それはとにかくあなたが望むものではありません。したがって、関数をそこに置くことは合法ですが、特別な意味はなく、したがって効果はありません。