Q&A
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
jQuery初心者のため、サイトの初心者用のページを見ながら勉強しています。
そこでクリックの度に背景色が変わるtoggleイベントのサンプルがあったので、
実行してみたのですが、クリックしても背景の色が変わりません。
今回はまだ勉強なので、実現できないと仕事に影響が出るわけではありませんが、
なぜそのようなことが起こっているのか、どうすれば実現できるのかを後の勉強に活かしたいと思い、
今回質問させていただきました。
###試したこと
①以下のjsを実行したところ、文字は表示されますがクリックしても背景色は変わりません。
②ためしに1つの命令($(this).css("background-color","green"))だけ実行してみると文字は表示されますが、すぐ下から上へフェードアウト
してしまいます。
タイプミスかと思い、サンプルをコピペしましたが同じ状況です。
これ以外のソース(javascriptやcss)は作成していません。
まだまだ勉強不足なのは承知しておりますが、ご教授ください。
jQuery
1$(function(){ 2 $(".changeToggle").toggle(function(){ 3 $(this).css("background-color","green") 4 },function(){ 5 $(this).css("background-color","yellow") 6 },function(){ 7 $(this).css("background-color","red") 8 },function(){ 9 $(this).css("background-color","orange") 10 }); 11 }); 12
html
1<html> 2 <head> 3 <title>クリックの度に色が変わる</title> 4 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 5 <script type="text/javascript" src="myScript.js"></script> 6 </head> 7 8 <body> 9 <div class="changeToggle" >クリックの度に色が変わります。</div> 10 </body> 11</html> 12
###補足情報(言語/FW/ツール等のバージョンなど)
jQueryはgoogleのCDNを利用しています。
windows7 64bit
回答3件
0
ベストアンサー
もしかしてこのコードサンプル、結構古いんじゃないですか？
バージョンいくつからだったか忘れましたが、toggle()はかなり大きく仕様が変更されまして、
現在はクリックするたびに要素の表示・非表示を切り替えるだけの機能になっていたはずです。
（以前はこのサンプルのように、クリックするたびに次の関数を順番に呼び出す機能でした）
なので、CDNで呼び出すjQueryを1.3とかすごく古いやつに変更すれば、意図した動きになると思われます。
ただ、そんな古いjQeuryを今更使うのはあまり現実的ではないので、最新仕様に基いて解説しているものを
参考に勉強された方が良いのではないかと思いますよ。
投稿2016/06/02 02:36
総合スコア3763
0
jquery-1.8.3位まではその書き方で行けたのですが
新しいのはその書き方だと消えちゃいますね
投稿2016/06/02 02:32
退会済みユーザー
総合スコア0
回答ありがとうございます。
参考にしていたサイトの作成日時が2012年だったので、情報が古いようでした。
jqueryのバージョンまで注意していませんでした。
ご指摘ありがとうございました。
0
クリックしても背景色は
クリックイベントと処理を紐付ける必要があります。
$(".changeToggle").on("click", function(e){ $(e.target).css("background-color", "red"); });
toggle自体は要素の表示・非表示の切り替えなので
<div class="changeToggle" >クリックの度に色が変わります。</div> <div class="changeToggle" style="display:none">クリックの度に色が変わりました。</div>
のようにする必要があるかと。
投稿2016/06/02 02:04
総合スコア5572
あなたの回答
tips
プレビュー
