jQueryでイベントを条件で分岐させる
上手いタイトルが思いつかない。僕がやりたいのはこういうこと、
「ある場所をマウスオーバーした時色を変える、マウスアウトをしたら色を戻す。ただしクリックしてあった場合、マウスアウトは無効とし、クリック後の色を残す」
もっとも簡単な解決法は、
「CSSで:hoverすれば良いじゃん」
なのだけれど、まあ上記に関わらず使いたい時があるかもしれないので、これを機に考えていく。
※※追記※※
難しく考えるものでもなかった
jQueryを使う
むしろ他に何を使う
マウスオーバー or アウトをしたときの動き
※元のフォントカラーを黒とする
$(function(){ $('h1').hover(function(){ $('h1').css('color','red'); }, function(){ $('h1').css('color','black'); }); });
クリックした時の動き
$(function(){ $('h1').click(function(){ $('h1').css('color','blue'); }); });
条件分岐
どうやって分岐しようか?
クリック後の色が他の色と異なる場合
これは簡単。
例えばクリック後にいろが青くなったとして、その青色はクリック時にしか現れないならば、現在の文字が青色か否かを判定すればよい。青色じゃない場合はホバーイベントを発生させる。
if($('h1').css('color') != 'blue'){ ホバーイベントを発生させる });
クリック時の色とその他の色が重なっている場合
もし、クリックもホバーもしていない状態が同じ青色だったとき(デフォルトのカラーがそもそも青色だったとき)、色でクリックしたかどうかを判断することはできない。
なので、普通に変数を用意する。
var flag = false; $(function(){ クリックイベントを発生させた時、flag = true とする。 }); if(!flag){ trueじゃなければ、クリックしてなければ ホバーイベントを発生させる }); });
実行未確認の部分があるので、ご容赦ください。