matsuhisa/index.html

## index.html
<html>
<head>
<meta charset="UTF-8">
<title>クリックイベント</title>
<link rel="stylesheet" href="./style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
</head>
<body>

<div class="button like" data-button-id="123456">
  <p class="">あいうえお</p>
</div>
<div class="button like" data-button-id="78910">
  <p class="">かきくけこ</p>
</div>

</body>
</html>

## script.js
var click_like = function(){
  // 1回目なのか？をチェックする
  if($(this).hasClass("like")){
    $(this).removeClass("like");
    $(this).addClass("liked");
    // 登録作業
  }else if ($(this).hasClass("liked")) {
    $(this).removeClass("liked");
    $(this).addClass("like");
    // 登録解除作業
  }
}

var favorites = {
  places: [78910, 12, 45, 111]
}

//
$(function(){
  var likes = $(".like");

  likes.each(function(index){
    var button_id = $(this).data('button-id');
    console.log(button_id);
    if( (button_id > 0) && $.inArray(button_id, favorites['places'])) {
      $(this).removeClass("like");
      $(this).addClass("liked");
    }

    $(this).bind('click', click_like);
  })
})

## style.css
.button {
  display: inline-block;
  border: 1px solid #333;
  padding: 0.2em;
  cursor: pointer;
}

.like {
  color: #ff658b;
  background-color: #eee;
}

.liked {
  color: #fff;
  font-weight: bold;
  background-color: #ff658b;
  -webkit-animation: bg-color 0.2s;
}

@-webkit-keyframes bg-color {
  50% { color: #ff658b; }
  90% { color: #fff; }
}
	<html>
	<head>
	<meta charset="UTF-8">
	<title>クリックイベント</title>
	<link rel="stylesheet" href="./style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript" src="./script.js"></script>
	</head>
	<body>

	<div class="button like" data-button-id="123456">
	<p class="">あいうえお</p>
	</div>
	<div class="button like" data-button-id="78910">
	<p class="">かきくけこ</p>
	</div>

	</body>
	</html>
	var click_like = function(){
	// 1回目なのか？をチェックする
	if($(this).hasClass("like")){
	$(this).removeClass("like");
	$(this).addClass("liked");
	// 登録作業
	}else if ($(this).hasClass("liked")) {
	$(this).removeClass("liked");
	$(this).addClass("like");
	// 登録解除作業
	}
	}

	var favorites = {
	places: [78910, 12, 45, 111]
	}

	//
	$(function(){
	var likes = $(".like");

	likes.each(function(index){
	var button_id = $(this).data('button-id');
	console.log(button_id);
	if( (button_id > 0) && $.inArray(button_id, favorites['places'])) {
	$(this).removeClass("like");
	$(this).addClass("liked");
	}

	$(this).bind('click', click_like);
	})
	})
	.button {
	display: inline-block;
	border: 1px solid #333;
	padding: 0.2em;
	cursor: pointer;
	}

	.like {
	color: #ff658b;
	background-color: #eee;
	}

	.liked {
	color: #fff;
	font-weight: bold;
	background-color: #ff658b;
	-webkit-animation: bg-color 0.2s;
	}

	@-webkit-keyframes bg-color {
	50% { color: #ff658b; }
	90% { color: #fff; }
	}