jqueryでyes/noチャートを作る方法

August 28, 2013 Jul 24, 2018

jqueryでyes/noチャートを作る方法をご紹介する。

そもそもこのチャートの呼び名が一般的かは不明だが

「はい いいえチャート」とも呼ばれているようだ。

サンプルデモは複数の答えを想定しているため厳密にはyes/noチャートではないのだが、構造は同じ。

やりたい事は、扱うサービスや商品が多い場合に、

「ユーザに質問に直感的に答えていただき、適合するサービスへと誘導する。」

といった感じ。ノンプログラマーのためかなり強引なコードかも知れないが

やりたいことが実現できたので紹介していこうと思う。

解説がいまいち分かりづらいのでまずはデモをご覧あれ。

See the Pen XBRZvd by ez-sparrow (@ez-sparrow) on CodePen.

大まかな流れ

  1. 質問と質問に対する答え(選択肢)をdivで囲う。
  2. 全てのdivにはそれぞれにidを割り当てる。
  3. 最初の質問以外のdivは全てdisplay:noneで非表示にする。
  4. 答え(選択肢)に設定されたidと次に進むdiv要素のidを同じに設定する。
  5. 答え(選択肢)をクリックすると、次の質問が表示される。
  6. ひとつ前の質問は非表示となる。

スポンサーサイト

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;
}

RELATED POSTS