クラスの追加・削除・切り替え・存在判定

クラスの追加

$(this).addClass('class');

対象の要素にクラスを追加する場合は、addClass({追加するクラス})を使用します。追加するクラスがすでにある場合には重複して追加されることはありません。複数のクラスを追加する場合には、addClass('class1 class2')のようにスペースでクラスを区切れば追加できます。

クラスの削除

$(this).removeClass('class');

対象の要素からクラスを削除する場合は、removeClass({追加するクラス})を使用します。削除するクラスがすでにない場合には無視されます。

すべてのクラスを削除するには、removeClass()のようにカッコ内に何も記載しなければすべてのクラスを削除することができます。また、複数のクラスを削除する場合には、removeClass('class1 class2')のようにスペースでクラスを区切れば複数のクラスを削除できます。

クラスの切り替え

$(this).toggleClass('class');

対象の要素のクラスを切り替える場合は、toggleClass({クラス})を使用します。切り替えというのは、指定されたクラスがすでに有れば削除し、クラスが無ければ追加するという意味です。

例えばON用とOFF用のクラスを用意して切り替える場合などに役に立ちます。

$('.class').on('click',function(){
	$(this).toggleClass('class_on').toggleClass('class_off').;
	return false;
});

クラスの存在判定

if( $(this).hasClass('class') ){
	//クラスが存在した場合の処理
}

対象の要素にクラスがあるかを判断する場合は、hasClass({クラス})を使用します。クラスが存在していればtrue、存在していなければfalseを返します。