toggleClass

.toggleClass(name1, name2, nameN.., [forceAdd])

マッチした要素のクラスを、追加または、削除します。

.toggleClass('name1');
.toggleClass('name1 name2 nameN');
.toggleClass('name1,name2,nameN');
.toggleClass(['name1', 'name2', 'nameN']);
.toggleClass('name1', forceAdd);

パラメータ

name1, name2, nameN..: string, array, object, function

マッチした要素で追加/削除を切り替えるクラス名(またはクラス名を含む配列やオブジェクト)。 このパラメータはいくつかの種類の型を受け取ることができます。

forceAdd: boolean

クラスの追加/削除について強制的に指定します。 trueは.addClass()、falseは.removeClass()です。

戻り値

u

Umbrellaのインスタンスを返します。

例

全てのh2にmainクラスを追加します。

u('h2').toggleClass('main');

<form class="ajaxify">に toValidateクラスを追加し、ajaxifyクラスを削除します。

u('form.ajaxify').toggleClass('toValidate ajaxify');

全てのh2に強制的にmainクラスを追加します。

u('h2').toggleClass('main', true);

最後の例は.addClass()を使うことが出来るので、あまり意味がありません。 2つめのパラメータを動的に指定することで、意味のあるものになります。

u('h2').toggleClass('main', u('.accept').is(':checked'));

デモ

"TOGGLE"にチェックしている場合は、 "PUSH"を押すたびに、文字の色、サイズが切り替わります。
"RED"、"SMALL"にチェックを入れるとクラスの追加/削除が固定化されます。

JavaScript

u('#demo').on('click', function() {
  u(this).removeClass('red', 'small');
});

CSS

.red {
  color: #d50000;
}
.small {
  font-size: 60%;
}

HTML

<form id="demo">
  <label>
    <input id="demo_togggle" type="checkbox">TOGGLE</label>
  <label>
    <input id="demo_red" type="checkbox">RED</label>
  <label>
    <input id="demo_small" type="checkbox">SMALL</label>
  <button type="button">PUSH</button>
</form>
<span class="red small" id="demo_txt">デモ用文字列</span>

関連項目

.addClass()マッチした全ての要素にクラスを追加します。

.removeClass()マッチした要素から、指定したクラスを削除します。

.hasClass() マッチした要素に、指定したクラスが含まれているかをどうか返します。