こんにちは。櫻井です。
今回はjqueryでおみくじを作ってみました。
おみくじボタンを押すとモーダルが出現して結果が表示される簡単な内容のものですが、できあがりは以下になります。
See the Pen omikuji by knap_develp (@knap_develp) on CodePen.
内容の説明
js-omikuji_btnをクリックするとまず始めにjs-omikuji_resultを削除します。
js-omikuji_resultは後におみくじの結果を表示するdiv要素です。
これはボタンを複数回クリックしたときに前回の結果が残らないようにするための処理です。
必要な情報を変数に格納していきます。
まずはrandomNumという変数におみくじの結果を決めるランダムな数を格納します。
Math.floor()は小数点以下を切り捨てる関数で、中に入っているMath.random()は0以上1未満のランダムな数を返します。その数字に5を掛けることでrandomNumに格納される数字を0〜4の5つにしています。
resultContentという変数には$(‘<div class=”l-omikuji_result js-omikuji_result”></div>’)という空のdiv要素を格納しています。
randomNumから得た数字をもとにswitchで条件分岐させ、resultという変数に結果を格納していきます。
最後にresultDomにresultの値を入れた結果を格納します。
これで必要な情報は揃ったのであとは表示させるための処理をしていきます。
まずはresultContent.append(resultDom)でここまで空のままだったresultContentに先ほど結果を格納したresultDomを入れます。
次にresultContent.appendTo(‘.js-omikuji_content’);でjs-omikuji_contentにresultContenを挿入します。
最後に$(‘.js-omikuji_modal’).addClass(‘is-active’);でis-activeを付与することで結果が入ったモーダルを表示させます。
これだけだと一度表示したら最後戻すことができなくなってしまうので非表示にするためにjs-omikuji_close_btnをクリックしたらjs-omikuji_modalからis-activeを外す処理を書いてできあがりです。
まとめ
今回は確率の調整は入れませんでしたがrandomNumの値を0～99にしてif文で0～9までは大吉とかってやれば各2つの調整付きの物もできます。
複数分岐させる時、僕は比較式がA === Bの形になる時はswitch文を使うようにしています。A>B とかA!=Bになる時はif文を使います。
