jQueryで単純に色を取得して使おうとしてもうまくいかない

最近フロントエンドへの興味が高まっている
フロントエンドと言うより、正確にはデザインへの興味かな
グイグイ動く「それっぽい」アプリケーションを作りたいってのが動機
何事も見た目が重要で、実際大したことないものでもデザインによってユーザーがいい感じに思わせられれば勝ちなわけで。少なくともそこで損しないように作れるスキルは必須ですよねっていう

そんなわけで誠にお恥ずかしながら今更jQueryをちゃんと始めてみた
そして早速軽くハマったので備忘録がてら書いておく

ハマったこと

jQueryがどんなものかとか基本的な書き方とかは知ってたので実践がてら、以下のようなコードを書いてみたけど動かない

$(function(){
      $("#test").click(function(){
         if($(this).css("background-color") == "red"){
           $(this).css("background-color","blue")
         }
         else{
            $(this).css("background-color","red")
         }
      }) 
})

やりたいことは赤だったら青、それ以外だったら赤に変えるってだけなのだが…
色指定が"#xxxxxx"形式じゃなきゃダメなの？と思って変えてみるも変わらず

原因と解決策

実は条件分岐のところで使用している$(this).css("background-color")の返り値は以下の形式になっている

rgb(xxx, xxx, xxx)

なので、条件のところを書き換えてやるとうまくいった

$(function(){
      $("#test").click(function(){
         if($(this).css("background-color") == "rgb(255, 0, 0)"){ /* 条件分岐の条件を変更 */
           $(this).css("background-color","blue")
         }
         else{
            $(this).css("background-color","red")
         }
      }) 
})

正直こんなことも知らなかったとか恥ずかしい限り
何事も概要だけ知っててもまったく扱えないものだと反省

これからはちゃんと自分でがんがん書いて行こうと思う