質問: jQuery初心者のため、サイトの初心者用のページを見ながら勉強しています。 そこでクリックの度に背景色が変わるtoggleイベントのサンプルがあったので、 実行してみたのですが、クリックしても背景の色が変わりません。 今回はまだ勉強なので、実現できないと仕事に影響が出るわけではありませんが、 なぜそのようなことが起こっているのか、どうすれば実現できるのかを後の勉強に活かしたいと思い、 今回質問させていただきました。 ### 試したこと 1以下のjsを実行したところ、文字は表示されますがクリックしても背景色は変わりません。 2ためしに1つの命令($(this).css("background-color","green"))だけ実行してみると文字は表示されますが、すぐ下から上へフェードアウト してしまいます。 タイプミスかと思い、サンプルをコピペしましたが同じ状況です。 これ以外のソース(javascriptやcss)は作成していません。 まだまだ勉強不足なのは承知しておりますが、ご教授ください。 ``` $(function(){ $(".changeToggle").toggle(function(){ $(this).css("background-color","green") },function(){ $(this).css("background-color","yellow") },function(){ $(this).css("background-color","red") },function(){ $(this).css("background-color","orange") }); }); ``` ``` クリックの度に色が変わる クリックの度に色が変わります。 ``` ### 補足情報(言語/FW/ツール等のバージョンなど) jQueryはgoogleのCDNを利用しています。 windows7 64bit
回答: もしかしてこのコードサンプル、結構古いんじゃないですか? バージョンいくつからだったか忘れましたが、toggle()はかなり大きく仕様が変更されまして、 現在はクリックするたびに要素の表示・非表示を切り替えるだけの機能になっていたはずです。 (以前はこのサンプルのように、クリックするたびに次の関数を順番に呼び出す機能でした) なので、CDNで呼び出すjQueryを1.3とかすごく古いやつに変更すれば、意図した動きになると思われます。 ただ、そんな古いjQeuryを今更使うのはあまり現実的ではないので、最新仕様に基いて解説しているものを 参考に勉強された方が良いのではないかと思いますよ。