「○○さんはAタイプです。あなたも診断してみよう！」FacebookやTwitterでこんな投稿を目にしたことがありませんか？今回は、SNSでよく見かける診断テストをjQueryでかんたんに作る方法を紹介します。
デモはこちら。実際のコードは以下です。
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ul> <li> Q1. 問題が入ります <label><input type="radio" name="q01" class="typeA"> YES</label> <label><input type="radio" name="q01" class="typeB"> NO</label> </li> //以下省略 </ul> <button>診断する</button> <div class="result resultA"> あなたはAタイプ </div> <div class="result resultB"> あなたはBタイプ </div> |
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$(function(){ //ボタンがクリックされた時 $("button").cllick(function(){ //一度結果を非表示にする $(".result").hide(); //問題数を取得 var qNum = $("ul li").length; if( $("ul li input:checked").length < qNum ){ //全てチェックしていなかったらアラートを出す alert("未回答の問題があります"); } else { //チェックされているinputの数を取得 var typeANum = $(".typeA:checked").length, typeBNum = $(".typeB:checked").length; if( typeANum > typeBNum ) { //もしもAの方が多かったらAタイプを表示 $(".resultA").fadeIn(); } else if( typeANum < typeBNum ) { //もしもBの方が多かったらBタイプを表示 $(".resultB").fadeIn(); } } }); }); |
今回はわかりやすいように結果を2パターンにしましたが、typeC、typeD…と同じようにクラス名を増やしていけばパターン数が多くても対応可能です。
jQueryを使えば診断テストは簡単に作成できます。ぜひ、ついつい拡散したくなるような診断テストを作ってみてください！
