thisを深い階層の中で使う
この記事のお気に入り登録ボタンを作っているときに、困ったことおきました。
サイト内お気に入り登録機能を作る。その1 - 新米SE、マーケティングを学ぶの巻
複数ボタンに同じクラスを指定して、clickイベントを一つ書いていたのですが、その中のif文でthisを使おうとしたら使えない…
$(".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地獄から少しは救われそう…