初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
Core：コアとなる仕組み
Selectors：セレクタ
Attributes：属性
Traversing：対象の変更
Manipulation：操作
CSS：スタイルシート
Events：イベント
Effects：演出効果
Ajax：xml等との連携
Utilities：ユーティリティ
Data：データ
Miscellaneous：諸々
Deferred：処理管理
Callbacks：コールバック
Internals：内部処理

.toggleClass( )クラス属性のトグル処理

構文

クラス属性のトグル処理返値：jQueryオブジェクト
jQo.toggleClass(クラス名)ver1.0〜
jQo.toggleClass(クラス名, true/false)ver1.3〜
jQo.toggleClass( )ver1.4〜
jQo.toggleClass(true/false)ver1.4〜
jQo.toggleClass(function, true/false)ver1.4〜

機能

引数にクラス名を指定することで指定したクラスをトグル処理（クラスが有る場合はクラスを削除し、無い場合はクラスを追加します）します。。ver1.3からは第２引数を設定できるようになり、そこにtrueを指定すると無条件でクラスを追加し、falseを設定すると無条件でクラスを削除するようになります。

v1.4からは引数を省略することも可能になりました。その場合はクラスを持っていない要素には何も操作せず、クラスを持っている要素はクラスを削除します。再度toggleClassメソッドを実行すると削除したクラスを全て復帰させることができます。
また引数にfalseを設定すると無条件で全てのクラスを削除します。削除したクラスを復帰したい場合は引数にtrueを設定したtoggleClassメソッドを実行します。

さらに引数にはfunctionを指定することも可能で、条件によって設定する内容を変更するなど高度な処理にも対応できます。

解説

指定したクラスのトグル処理

引数にクラス名を指定することで、セレクタで選択された要素が指定したクラスを持っていない場合はクラスを設定し、クラスを持っている場合はクラスを削除します。サンプル（toggleClass/01.html）を開いてhtml内にdiv要素が4つあり、交互にredのクラス属性が設定されていることを確認して下さい。 

<div class="red">最初にclass「red」が有るdiv</div>
<div>最初はclass「red」が無いdiv</div>
<div class="red">最初にclass「red」が有るdiv</div>
<div>最初はclass「red」が無いdiv</div>

jQueryには以下の様に記述され、buttonをクリックするとtoggleClassメソッドによってredのクラス属性を持っているdivからはクラスが削除され、持っていないdivにはクラスが追加されます。 

$("button").click(function(){
	$("div").toggleClass("red");
})

複数のクラス名を設定したい場合は半角スペースを挟んでクラス名を設定します。
サンプル（toggleClass/01b.html）を開いてhtmlの構成はサンプルtoggleClass/01.htmlから変更がないことを確認して下さい。jQueryでは以下の様にtoggleClassメソッドの引数にredとboldの２つのクラス名が設定されています。 

$("button").click(function(){
	$("div").toggleClass("red bold");
})

このサンプルではredのクラス属性の操作に追加してboldのクラス属性も操作されます。すべてのdiv要素は最初boldのクラス属性が無いのでbuttonをクリックすると全てのdiv要素にboldのクラス属性が追加されます。再びbuttonをクリックすると追加されたboldのクラス属性が削除されます。

クラスの操作を強制する

toggleClassメソッドの特長はクラスを持っている要素と持っていない要素で操作の内容を自動的に変更してくれる事にありますが、第２引数にtrueやfalseを設定することで操作内容を強制することができます。第２引数にtrueを設定すると、セレクタで選択した要素にクラスが有ろうと無かろうと無条件にクラスを追加します。falseを設定すると無条件にクラスを削除します。

サンプル（toggleClass/02.html）を開いてhtml内のdiv構成はサンプルtoggleClass/01.htmlから変更ないのですが、buttonが２つ（id属性がaddとremove）に増えていることを確認して下さい。

jQueryは以下の様に記述されaddボタンがクリックされたときは第２引数にtrueが設定されたtoggleClassが実行され、removeボタンがクリックされたときは第２引数にfalseが設定されたtoggleClassが実行されます。 

$("button#add").click(function(){
	$("div").toggleClass("red",true);
})
$("button#remove").click(function(){
	$("div").toggleClass("red",false);
})

その結果addボタンをクリックするとすべてのdivに無条件にredのクラス属性を追加し、removeボタンをクリックするとすべてのdivから無条件にredのクラス属性を削除します。

しかし、これではaddClassメソッドやremoveClassメソッドと同じ機能になるため必要性に疑問を感じるかもしれません。ですが、工夫することで複雑な処理を簡潔に書くことができます。

サンプル（toggleClass/02b.html）を開いてhtmlの構成はサンプルtoggleClass/01.htmlから変更がないことを確認して下さい。jQueryは以下の様に記述され、buttonをクリックする度に変数cntがカウントアップされていきます。ポイントなのはtoggleClassの第２引数で、ここでtrueやfalseの代わりに比較式が記述されています。比較式は式が成立するときにはtrue、成立しないときにはfalseとなるため、このサンプルでは変数cntを3で割った余りが0になるときにtrueとなります。 

var cnt=0;		
$("button").click(function(){
	cnt++;
	$("div").toggleClass("red",cnt%3==0);
})

結果としてbuttonをクリックすると３回ごとに（3で割った余りが0になるため、条件式の結果がtureとなり）redのクラス属性が設定され文字が赤くなります。

引数を省略する

toggleClassメソッドはv1.4から引数に何も設定しなくても機能するようになりました。この構文を利用するとクラスが設定されていない要素は操作しないのですが、クラスが設定されている要素は、そのクラスをトグル処理します。

サンプル（toggleClass/03.html）を開いてhtml内に3つのdiv要素があるのを確認して下さい。最初のdivにはredのクラスが追加され、次のdivにはblueのクラスが追加され、最後のdivにはクラスがありません。jQueryは以下の様にtoggleClassメソッドの引数に何も設定していません。 

$("button").click(function(){
	$("div").toggleClass();
})

buttonをクリックすると最初からclassが設定されていない一番下のdiv要素は変化しませんが、クラスがあるdiv要素からはクラスが削除され文字色が黒になります。再びbuttonをクリックすると削除されたクラスが復帰し文字色が赤や青に戻ります（最初からクラスがないdiv要素は変化しません）。この構文のメリットは、このサンプルのように異なるクラス（red/blue）の操作をまとめて行える点にあります。

引数にtrue/falseを設定

また、引数にはtrueやfalseを設定することができます。trueを設定した場合は引数を設定していないのと同じ動作になりますが、falseを設定すると無条件に全てのクラスを外すようになります。

サンプル（toggleClass/03b.html）を開いてdiv要素の構成はサンプルtoggleClass/03.htmlから変更がないことを確認して下さい。しかしbuttonが２つ（id属性がttueとfalse）に増えていることを確認して下さい。jQueryは以下の様に記述されid属性がtrueのボタンをクリックするとtoggleClassメソッドの引数にtrueを設定して実行し、falseボタンをクリックするとtoggleClassメソッドの引数にfalseを設定して実行します。 

$("button#true").click(function(){
	$("div").toggleClass(true);
})
$("button#false").click(function(){
	$("div").toggleClass(false);
})

trueボタンをクリックしたときの動作は引数を設定していないサンプルtoggleClass/03.htmlと同じ動作になります。falseボタンをクリックした場合は無条件に全てのクラスを外します。

引数にFunctionを設定

toggleClassメソッドでは引数にfunctionを設定することができます。functionを設定することで条件によって設定するクラスを変更するなど、高度なニーズに対応することができます。

サンプル（toggleClass/04.html）を開いてhtml内にクラスの付いていない２つのdiv要素があるのを確認してください。jQueryは以下の様になっており、buttonをクリックするとtoggleClassメソッドにfunction「toggleClassFunc」が設定されています。 

$("button").click(function(){
	$("div").toggleClass(toggleClassFunc);
})

toggleClassの引数に設定するFunctionは以下の様な構文になっています。まず3つの引数（インデックス番号/現在のクラス名/スイッチ）を受け取ります。これらの引数の値は｛｝内の処理で利用することができます。そして任意の処理の後で操作したいクラス名をreturnで返すようにします。

toggleClassに設定するFunctionの構文
function 任意の名前(インデックス番号, 現在のクラス名, スイッチ){
　任意の処理（2つの引数を利用可能）
　return 操作したいクラス名;
}

ここで設定しているfunction「toggleClassFunc」は以下の様になっており、引数で受け取った変数index（インデックス番号）が0だったら変数newToggleClassにredを代入し、そうでなかったらblueを代入し、returnで返します。このサンプルでは引数のclassName（現在のクラス名）とboo（スイッチ）は利用していません。 

function toggleClassFunc(index,className,boo){
	var newToggleClass;	
	if (index==0){
		newToggleClass ="red";
	}else{
		newToggleClass ="blue";
	}
	return newToggleClass;
}
結果として、最初（インデックス番号が0）のdiv要素はredのクラスをトグル処理（クラスが有るときは削除して、クラスがないときは追加する）します。それ以外のdiv要素はblueのクラスをトグル処理します。

ちなみにreturnで返す値はクラス名だけでなくture/falseも利用できます。その場合はtoggleClass/03b.html（引数にtrue/falseを設定）と同じ処理になります。

toggleClassに設定するFunctionの引数「スイッチ」について

引数にfunctionを設定できるメソッドは多いのですが、functionで受け取る引数は大抵インデックス番号と現在の状態の２つです。しかしtoggleClassでは第３の引数を受け取ることができます（toggleClass/04.htmlでは変数boo）。この引数は通常の状態ではundefinedになっています。
サンプル（toggleClass/05.html）を開いてtoggleClassFuncが以下の様に第３引数booをアラートで表示するようになっていることを確認してください。 

function toggleClassFunc(index,className,boo){
	alert(boo);
}

このサンプルでbuttonをクリックするとbooがアラートで表示されますが、undefinedと表示されるだけです。

この第３引数はtoggleClassでfunctionを設定する際、第２引数に設定した値を受け取るようになっています。サンプルtoggleClass/05.htmlではtoggleClassの第２引数に何も設定していなかったのでundefinedとなるのです。

それでは第２引数に値を設定したサンプル（toggleClass/05b.html）を開いてjQueryの以下の部分を確認してください。toggleClassメソッドの第２引数としてtureを渡しています。 

$("button").click(function(){
	$("div").toggleClass(toggleClassFunc,true);
})

このサンプルでbuttonをクリックするとアラートで「true」と表示されることから、きちんと変数booに第２引数のtureが渡されていることが確認できます。良い使い道は思い浮かばないのですが、外部からfunctionを操作できるため、より高度な操作が実現できそうです。