Umbrella - にほんご。

toggleClass

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

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


パラメータ

name1, name2, nameN.. : string, array, object, function
マッチした要素で追加/削除を切り替えるクラス名(またはクラス名を含む配列やオブジェクト)。 このパラメータはいくつかの種類の型を受け取ることができます。
forceAdd : boolean
クラスの追加/削除について強制的に指定します。 true.addClass()false.removeClass()です。
.toggleClass('name1');
.toggleClass('name1 name2 nameN');
.toggleClass('name1,name2,nameN');
.toggleClass(['name1', 'name2', 'nameN']);
.toggleClass('name1', forceAdd);

戻り値

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

全てのh2mainクラスを追加します。

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" id="demo_txt">デモ用文字列</span>

関連項目

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

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

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

© 2014 Francisco Presencia Released under the MIT license

このコンテンツはFrancisco Presencia(franciscop)によるUmbrella JSドキュメントを翻訳/改変したものです。