jqueryでyes/noチャートを作る方法をご紹介する。
そもそもこのチャートの呼び名が一般的かは不明だが
「はい いいえチャート」とも呼ばれているようだ。
サンプルデモは複数の答えを想定しているため厳密にはyes/noチャートではないのだが、構造は同じ。
やりたい事は、扱うサービスや商品が多い場合に、
「ユーザに質問に直感的に答えていただき、適合するサービスへと誘導する。」
といった感じ。ノンプログラマーのためかなり強引なコードかも知れないが
やりたいことが実現できたので紹介していこうと思う。
解説がいまいち分かりづらいのでまずはデモをご覧あれ。
See the Pen XBRZvd by ez-sparrow (@ez-sparrow) on CodePen.
大まかな流れ
- 質問と質問に対する答え(選択肢)をdivで囲う。
- 全てのdivにはそれぞれにidを割り当てる。
- 最初の質問以外のdivは全てdisplay:noneで非表示にする。
- 答え(選択肢)に設定されたidと次に進むdiv要素のidを同じに設定する。
- 答え(選択肢)をクリックすると、次の質問が表示される。
- ひとつ前の質問は非表示となる。
jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script>// <![CDATA[ $(function(){ $(".btn").on("click", function() { $(this).closest("div").css("display","none"); id = $(this).attr("href"); $(id).addClass("positionFit").show("fast"); }); }); // ]]></script>
解説
1行目 外部からjqueryを読み込んできる。
4行目 .btnをクリックすると
5行目 クリックした要素から一番近い祖先(closest)のdiv要素にdisplay:noneを適用
6行目 クリックした要素のhref内の値を取得し、idとする。
7行目 idを検索し、positionFitというクラスを適用し、あらかじめ閉じられていたその要素をshow。アニメーションはfast。
html
<div class="yesno clearfix"> <div id="q_01" class="positionFit"> <h2>Question1</h2> <p>お探しの商品はどのタイプですか?</p> <ul class="col_2"> <li><a class="yn_btn" href="#q_02_A">タイプA</a></li> <li><a class="yn_btn" href="#q_02_B">タイプB</a></li> </ul> </div> <div id="q_02_A" style="display: none;"> <h2>Question2</h2> <p>Aタイプの中でお探しの商品は何色ですか?</p> <ul class="col_3"> <li><a class="yn_btn" href="#q_03_A">A色</a></li> <li><a class="yn_btn" href="#q_03_B">B色</a></li> <li><a class="yn_btn" href="#q_03_C">C色</a></li> </ul> </div> <div id="q_02_B" style="display: none;"> <h2>Question2</h2> <p>Bタイプの中でお探しの商品は何色ですか?</p> <ul class="col_3"> <li><a class="yn_btn" href="#q_03_D">D色</a></li> <li><a class="yn_btn" href="#q_03_E">E色</a></li> <li><a class="yn_btn" href="#q_03_F">F色</a></li> </ul> </div> <div id="q_03_A" style="display: none;"> <h2>Answer A</h2> <p>ご希望の商品はこちらですか?</p> <ul class="col_1"> <li>AタイプのA色</li> </ul> </div> <div id="q_03_B" style="display: none;"> <h2>Answer B</h2> <p>ご希望の商品はこちらですか?</p> <ul class="col_1"> <li>AタイプのB色</li> </ul> </div> <div id="q_03_C" style="display: none;"> <h2>Answer C</h2> <p>ご希望の商品はこちらですか?</p> <ul class="col_1"> <li>AタイプのC色</li> </ul> </div> <div id="q_03_D" style="display: none;"> <h2>Answer D</h2> <p>ご希望の商品はこちらですか?</p> <ul class="col_1"> <li>BタイプのD色</li> </ul> </div> <div id="q_03_E" style="display: none;"> <h2>Answer E</h2> <p>ご希望の商品はこちらですか?</p> <ul class="col_1"> <li>BタイプのE色</li> </ul> </div> <div id="q_03_F" style="display: none;"> <h2>Answer F</h2> <p>ご希望の商品はこちらですか?</p> <ul class="col_1"> <li>BタイプのF色</li> </ul> </div> </div>
ポイント
div要素はcssクラス”positionFit”で絶対位置でレイアウトされている。
答えのaタグをid=”#q1″とした場合、次に進むdiv要素にも同じid”#q1″を設定しておく。
CSS
.yesno { height: 500px; position:relative; } .yesno ul li { list-style:none; float: left; text-align: center; display: block; color: #FFF; background-color: #066; line-height: 300px; font-size: 120%; } .positionFit { position:absolute; left: 0px; top: 20px; } .col_1 li { width: 100%; margin: 1%; } .col_2 li { width: 48%; margin: 1%; } .col_3 li { width: 31%; margin: 1%; } .yesno ul li a { color: #FFF; text-decoration: none; height: 100%; width: 100%; display: block; background-color: #066; } .yesno div { clear: both; height: 300px; width: 100%; } .yesno ul li a:hover { background-color: #004747; }