jQuery API の toggleClass( function( index, class, switch ) [, switch] ) は、switchがtrueであれば、マッチした要素のクラス属性の値の中に、関数で指定したクラス名を追加し、switchがfalseであれば、マッチした要素のクラス属性の値の中から、関数で指定したクラス名を削除するメソッド。インデックス番号、クラス属性の現在の値、スイッチの値（true、もしくは、false）を、関数に引き渡すことができる。function関数の１つ目の引数が、インデックス番号、２つ目の引数が、クラス属性の現在の値、３つ目の引数が、スイッチの値（true、もしくは、false）。
引数
- function( index, class, switch )
クラス名を返す。
- index
第１引数。
インデックス番号。
- class
第２引数。
クラス属性の現在の値。
- switch
第３引数。
スイッチの値。
true、もしくは、false。
- [, switch]
オプション。
booleanType（論理型）。
trueであれば、追加する。
falseであれば、削除する。
記述方法
function( インデックス番号, クラス属性の現在の値, スイッチの値 ) {
return 追加もしくは削除するクラス名;
}
, スイッチ
);
「スイッチ」がtrueであれば、「セレクター」に指定した要素のクラス属性の値に、function関数で指定したクラス名を追加する。
「スイッチ」がfalseであれば、「セレクター」に指定した要素のクラス属性の値から、function関数で指定したクラス名を削除する。
その際、「セレクター」に指定した要素の、「インデックス番号」と、「クラス属性の現在の値」と、「スイッチの値（trueもしくはfalse）」を、function関数に引き渡すことができる。
実装例（サンプル）
- 項目１
- 項目２
- 項目３
実装例（サンプル）の動作について
「クラス名を追加/削除」ボタンをクリックすると、「項目１」を赤色に、「項目２」を青色に、「項目３」を緑色にする。
「クラス名を追加/削除」ボタンを再度クリックすると、すべての項目を灰色に戻す。
実装例（サンプル）のソースコード
JavaScript
<!--
jQuery( function() {
jQuery( '.jquery-sample-button' ) . click( function() {
var flag = jQuery( this ) . val();
jQuery( '#jquery-sample-ul li' ) . toggleClass(
function( index ) {
return 'jquery-sample-li-' + index;
}
, flag == 'add'
);
} );
} );
// -->
</script>
CSS
<!--
.jquery-sample-li {
color: gray;
}
.jquery-sample-li-0 {
color: red;
}
.jquery-sample-li-1 {
color: blue;
}
.jquery-sample-li-2 {
color: green;
}
-->
</style>
HTML
<button class="jquery-sample-button" value="add">クラス名を追加</button>
<button class="jquery-sample-button" value="remove">クラス名を削除</button>
</p>
<ul id="jquery-sample-ul">
<li class="jquery-sample-li">項目１</li>
<li class="jquery-sample-li">項目２</li>
<li class="jquery-sample-li">項目３</li>
</ul>