クリックされたボタンの色を変更するjQuery

更新日：2016年9月25日

画像のボタンがあったとして、そのボタンをクリックした時に何らかのアクションを与えたい時があるとします。例えばそのボタンの色を変更したり、別の画像に差し替えたりとかですね。

他にも現在見ているページのメニューの色を変更（ハイライト）する方法で紹介したように、現在見ているページのメニューの色を変更し、階層を知らせる際にも使うことが出来ますよ。
このページではその方法をご紹介します。

まずはいつもの如く完成デモをご覧下さい。
クリックするとボタンの色が変更されます。また、違うボタンをクリックするともう一方のボタンの色が元の色に戻ります。

それでは実装方法のご紹介です。HTMLには下記のように記述。

ただ画像のボタンを並べているだけの記述です。重要なのはm01とm02のclassをつけている点です。

次にjQueryには下記のように記述。

$(function() {
	function place_reset() {
		$(".m01 img").attr('src', "images/bottan_01.png");
		$(".m02 img").attr('src', "images/bottan_02.png");
	}

	$(".m01").click(function() {
		place_reset();
		setTimeout(function() {
			$(".m01 img").attr('src', "images/bottan_01_h.png");
		},300);
	});

	$(".m02").click(function() {
		place_reset();
		setTimeout(function() {
			$(".m02 img").attr('src', "images/bottan_02_h.png");
		},300);
	});
});

何をやっているかというと、最初にplace_resetという関数を作成しています。この関数はm01とm02の画像のボタンの色が変更されていた時、もし違うボタンがクリックされたら、元の色の画像のボタンに戻すというものです。

classのm01がクリックされた際、m01の画像をbottan_01.pngという画像に置き換えます。
この時、setTimeoutで少し置き換えを遅らせている点がポイント。遅らせないと挙動が安定しない為です。

これにて完成です。
色々活用出来そうな場面が大量にありそうな汎用性のある記述だと思いますので、是非ご活用下さい。

ちなみに
$(".m01").click(function() {
の部分を消してしまえば、クリックされた時ではなく、読み込まれた時点で画像のボタンの色を変更することが出来ます。
現在見ているページのメニューの色を変更し、階層を知らせる際にはこちらの方で使うことになるでしょう。