JQueryで3つのclassをtoggle(切替)する方法

3種のclassの切替、実務で出てくるものなのかは良く分かりませんが、、
私の趣味の範囲では、今まで2回、使う場面がありました。

うち2回目が、勉強したてのjQueryで、
ハマって自己解決したので、自分のツイートからまとめます。

結論だけ知りたい人は、目次▼から飛んでくださいm(_ _)m

classが２つだと、こうです

まず前提。

$(some_node).addClass('success').removeClass('error');

ウェブカツでやりました。

だったらclassが３つ(またはそれ以上)の場合は？

class3つを切り替えるために、色々試します

今回は、'success' 'notice' 'error' という3つのclassを切り替えたいです。

その１　動くけどスマートじゃない

まず書いてみたのがこれ。動きました。

$(some_node).addClass('success').removeClass('notice').removeClass('error');

でも長いです。「絶対これじゃない」感じ。

その２　引数を二つにしてみる

removeClass の引数に２個渡してみると、２個目が認識されません。このメソッドの引数は１個だけらしい。

$(some_node).addClass('success').removeClass('notice', 'error');

その３　素のjsを真似してみる

素のjsでは、こう書くと、容赦なく置き換えてくれてラクです。

getElementById(’node’).className = 'success';

で、真似してこう書いてみました。動きません。

$('#node').className = 'success';

コンソールで見たら、 getElementById(’node’) と $('#node') は全然別の物が取れていました。なるほど、無理だ。

正解はこれ(やっと検索した)

jQueryの公式ドキュメントを検索して、removeClassの仕様を調べました。(英語(汗))(日本語サイトでパッと見つかったものは、最終更新が2010年くらいで、怖くて見れなかった・・・)

これが正解！↓

$(some_node).addClass('success').removeClass('notice error');

スペースで区切ることで、removeClassメソッドに複数のclassを渡せるんですね。

これで３つのclassを切り替えることができました。