jQueryでツールチップ！変数と真偽値を使った条件分岐を追記
今回は、jQueryで前回作成したツールチップに変数と真偽値を使った条件分岐を追加で記載していこうと思います。
実は、前回完成したはずのツールチップ、まだ、やり残した点がございます。動作自体は問題ないように見えますが、さらにレスポンスを向上させるため、変数と真偽値を使った条件分岐を追加で記載・考え方、マウスオーバーで非表示になるタイミングについてサンプルコードを記述しながら詳しく説明していこうと思います。
という事で、それでは今回はッ、
- ・前回完成のツールチップ動作確認
- ・変数と条件分岐の使い方
- ・trueとfalse：真偽値
- ・真偽値を使った条件分岐
上記について記載していこうと思います…。
前回完成のツールチップ動作確認
前回完成したツールチップはsetTimeout()を利用して、マウスを外すとツールチップが、1000ミリ秒後にフェードアウトるというアニメーションでした。しかし、li要素にマウスをのせて、すぐに一度はずしてから、もう一度マウスを乗せてそのまま待つと、2回目にマウスを乗せた後、しばらくするとツールチップが消えてしまいます。
これは、間違えでも誤作動でもありません。前回のサンプルでは、マウスが外れてから1000ミリ秒後に、ツールチップが消えるようコーディングしているわけですので、その間にマウスをのせても、すでに処理が開始されているので消えてしまうのは正常な動作です。setTimeout()で時間差をつけているので、このようなことになってしまいます。
変数と条件分岐の使い方
それではマウスが乗っているときは、非表示にするアニメーションを実行しないよう変数と条件分岐のコードを付け加えてみます。
$(“.tooltip”).each(function(){
var onMouse = false;——①
var toolTip = $(‘<div class=”tooltip-body”>’);
var toolTipText = $(this).attr(“data-tooltip”);
toolTip.html( ‘<p>’ + toolTipText + ‘</p><span class=”tail”></span$gt;’ ).hide();
$(“body”).append(toolTip);
$(this).hover(function(){
onMouse = true;——②
if( toolTip.css(“display”) === “none” ){
var targetPostion = $(this).offset();
toolTip.css({
“display”:”block”,
“position”: “absolute”,
“left”: targetPostion.left + “px”,
“z-index”: “9999”
});
var toolTipHeight = toolTip.height();
toolTip.css({
“top”: targetPostion.top – toolTipHeight -3 + “px”,
“opacity”: “0”,
})
.stop().animate({
“top” : “-=10px”,
“opacity”: “1”
}, 250);
}
},
function(){
onMouse = false;——③
if( toolTip.css(“display”) !== “none” ){
setTimeout(function(){
if(!onMouse){——④
toolTip.stop().animate({
“top”: “-=10px”,
“opacity”: “0”
}, 250, function(){
toolTip.hide();
}
);
}
}, 1000);
}
});
});
});
マークされた黄色の部分が書き加えたコードです。まず①でonMouseという変数を作り、falseという値を入れています。
var onMouse = false;
ではここで、falseについて、「真偽値」と共に以下ににて説明を記載いたします。
trueとfalse：真偽値
以前記載いたしました条件分岐であるif。そしてif文では比較演算子を利用して、条件を記述すると記載いたしました。しかしこれには続きがあります。下記にif分の例を記載いたします。
var int = 10;
if( int < 20){
// 条件に当てはまったときの処理 M
} else {
// 条件に当てはまらなかったときの処理 K
}
上記を説明すると、まずintという変数に、10という数値が入っています。そしてif文には、（int<20）という条件が記述されています。これは「intが20よりも小さかったら」という条件になります。そしてintに代入されている数値は10なので、（10<20）となりますので、正しい条件に当てはまることになります。
ここで変数intの中身を30に変更してみると、条件は（30<20）となります。この数式は正しくありません。なので条件に当てはまらず、elseのほうに記述されている処理 Kを実行することになります。
この正しいと正しくないを、プログラムの世界ではtrue（真）/false（偽）と呼びます。
・（10<20）は正しいのでtrue（真）
・（30<20）は正しくないのでfalse（偽）
そしてこのtrue/falseのことを真偽値といいます。
ここでif文をもう一度記載してみます。今までは「条件に当てはまったら」という表現をしてきましたが、実はif文は真偽値で条件を分岐させています。つまり下記のように表現するのが正しい表現になります。
var int = 10;
if( int < 20){
// 条件がtrueだったときの処理 M
} else {
// 条件がfalseだったときの処理 K
}
それではもひとつif文を記載してみます。
var test = true;
if(test){
// 条件がtrueだったときの処理 M
} else {
// 条件がfalseだったときの処理 K
}
if文の条件には、今までのように比較演算子が書かれていませんが、変数testには真偽値のtrueが代入されています。if文はtrueかfalseで条件分岐しているので、上記の例では処理 Mが実行されることになります。
このように比較演算子を利用しないif文も沢山あります。「if文はtrue/falseで条件分岐する」ということを覚えておくことをオススメします。
真偽値を使った条件分岐
それでは、初めに記載したサンプルscriptのご説明を記載します。①では、onMouseという変数にfalseを代入しています。そしてマウスが乗ったときには、この変数onMouseの値をtrueに書き換えています（②）。逆にマウスが外れたときには、falseを代入してもとに戻しています（③）。
これでマウスが乗っている時には、onMouseの値は常にtrueに、外れたときにはfalseになります。この変数を利用して④で条件分岐させればマウスが乗っているかいないかで処理を分岐させることができます。
if(!onMouse)————-もしonMouseの値がtrueじゃなければ
※「!」は、値を『真偽値』として評価したあとその値を反転させます。
これでマウスが外れている（false）のときだけ、ツールチップを非表示にするコードが実行されるようになります。
ということで今回は、jQueryでツールチップ！変数と真偽値を使った条件分岐を追記につきまして、サンプルコードを交え記載してみました。
真偽値と条件分岐、ズバリ大事です！！プログラミングの世界では、JavaScriptおよびjQueryに限らず色々なプログラム言語で登場します。真偽値を使った条件分岐を徹底的に使いこなせるようになると、色々なプログラムの幅がより一層広がることは言うまでもありません。しかし、慣れないとtrue？false？が訳が分からなくなることも多々あることと思いますので、時間をかけてじっくり使いこなせるようになることをオススメします。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
