サイト内お気に入り登録機能を作る。その１

サイト内のお気に入りボタンをポチると、お気に入り登録(ブラウザじゃなくて、サイトのDB)されてお気に入りボタンが黄色く光るってのを作ろうと思います。

まずは外見から入ります。
こんな感じで。

ソースコードはこちらです。

HTML

<p><button data-condition=false class="favoButton" data-favoNum=1>☆</button></p>
<p><button data-condition=false class="favoButton" data-favoNum=2>☆</button></p>

JavaScript

$(".favoButton").click(function() {
	
	var button = this;
	//お気に入りボタンのdata-conditionで制御
	if($(this).data('condition') == false){
	  //お気に入り登録
	  //お気に入りボタンの色を黄色に
	  $(button).css('backgroundColor', '#FF0');
	  //お気に入りボタン状態の更新
	  $(button).data('condition',true);
	}
	else if($(this).data('condition') == true){

	  //お気に入り登録解除
	  //背景色を解除
	  $(button).css('backgroundColor', '');
	  //お気に入りボタン状態の更新
	  $(button).data('condition',false);
	}
});

1. 「data-condition」でお気に入り済みかを判断。
2. ボタンの背景色を変更
という手順で行っています。

次回は内部的な機能を作ります！