【jQuery】かんたん！クラス指定の追加・削除

【クラスを「追加」したいとき】 

【基本形】

$('#【指定したいID】').addClass('【「追加」したいクラス名】');

説明：クラスを削除するには、追加したいクラスを「.addClass」で指定してあげれば良いです。

【例】

この文章をクリックするとマイルドグリーン。

【コード】

//①[addclass01]を押すと
$('#addclass01').on('click', function () {
	//②このIDに / クラス追加 / このクラスを。      
	$('#addclass01').addClass('marker_m_green_futo');
});

【クラスを「削除」したいとき】 

【基本形】

$('#【指定したいID】').removeClass('【「削除」したいクラス名】');

説明：クラスを削除するには、削除したいクラスを「.removeClass」で指定します。

【例】

この文章をクリックするとマーカー解除。

【コード】

//[removeclass01]を押すと
$('#removeclass01').on('click', function () {
	//このIDの　クラス削除　このクラス名の。      
	$('#removeclass01').removeClass('marker_m_blue_futo');
});

なお、特に残しておきたいクラスが無い場合は、削除したいクラス名を省略することもできます。

【コード：全削除】

//[removeclass01]を押すと
$('#removeclass01').on('click', function () {
	//このIDの　クラス削除　全部（指定なし）
	$('#removeclass01').removeClass();
});

【複数のクラスを「追加・削除」したいとき】 

クラスを都合に合わせてONにしたりOFFにしたりする場合には２通りあります。

方法①【.removeClass】【.addClass】を組み合わせて使用する

【基本形】

$('#【指定したいID】').removeClass('【「削除」したいクラス名】')

　　　.addClass('【「追加」したいクラス名】');

説明：あるクラスから別のクラスに変更したい場合は、「.removeClass」で削除してから「.addClass」で指定してあげるだけでOK

【例】

この文章をクリックするとマーカーが交互にかわります。

【コード】

var i		 = 0;
var clsA	 = "";
$('#changeclass01').on('click', function () {
	i++;
	console.log(i);
	if(i % 2 === 0) {

		clsA	 = "marker_m_green_futo";
	}else {
		clsA	 = "marker_m_pink_futo";
	} 
	$('#changeclass01').removeClass()
	.addClass(clsA);
});

方法②【.toggleClass】を使用する

【基本形】

$('#【指定したいID】').toggleClass('【指定したクラス名】');

説明：これは「？」となる方が多いのではと思います。

「指定したクラス名」

①すでにある：消す

②ない：追加する

上記を自動で行ってくれる便利な機能です。

百聞は一見にしかず。以下をお試しください。

【例】

この文章をクリックするとマーカーの有無がかわります。

【コード】

$('#toggleclass01').on('click', function () {
	////このIDの　クラスをON・OFF　クラス名
	$('#toggleclass01').toggleClass('marker_m_pink_futo');
});

以上です。いかがでしょうか？

試されてうまくいかない場合は、ブラウザのキャッシュクリアをお試しください。