新米SE、マーケティングを学ぶの巻

Web系のプログラミングの記事や、マーケティングについて書いていきます。

thisを深い階層の中で使う

この記事のお気に入り登録ボタンを作っているときに、困ったことおきました。
サイト内お気に入り登録機能を作る。その1 - 新米SE、マーケティングを学ぶの巻

複数ボタンに同じクラスを指定して、clickイベントを一つ書いていたのですが、その中のif文でthisを使おうとしたら使えない…

JavaScript

$(".favoButton").click(function() {
	//押されたボタンの特定
	var num = $(this).data("favonum");
	//お気に入りボタンのdata-conditionで制御
	if($(this).data('condition') == false){
	  //お気に入り登録
	  //お気に入りボタンの色を黄色に
	  $(this).css('backgroundColor', '#FF0');//←thisが使えない
	  //お気に入りボタン状態の更新
	  $(this).data('condition',true);//←thisが使えない
	}

idを一つ一つふるしかないのかと絶望していたところ…
もしやと思い、thisを一度別の変数に代入すれば、使えました!

 $(".favoButton").click(function() {
    //押されたボタンの特定
    var num = $(this).data("favonum");
    var button = this;//←thisを別の変数に代入
    //お気に入りボタンのdata-conditionで制御
    if($(this).data('condition') == false){
      //お気に入り登録
      //お気に入りボタンの色を黄色に
      $(button).css('backgroundColor', '#FF0');//←thisのように使える
      //お気に入りボタン状態の更新
      $(button).data('condition',true);//←thisのように使える
    }

これで大量のid地獄から少しは救われそう…