<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>测测你国庆该去哪里玩</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="yes" name="apple-touch-fullscreen">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<link rel="stylesheet" href="css/bske.css">
<script type="text/javascript" src='js/jquery.js'></script>
<script type="text/javascript" src='js/test.js'></script>
</head>
<body>
<div class="con">
	<div class="subBg"></div>
	<div class="sub">
		<img class="subTitle" src="img/subTitle.png" />
		<div class="noteBox">
			<div class="notebook">
				<img src="img/first.png" />
				<p class="subject">宝贝在旅行前的表现？</p>
				<p class="choice option" id="A">A.说走就走，非常淡定，丝毫不慌</p>
				<p class="choice option" id="B">B.异常兴奋，激动到半夜睡不着觉</p>
			</div>
			<div class="notebook" style="display:none">
				<img src="img/second.png" />
				<p class="subject">宝贝在旅行中和其他人相比？  </p>
				<p class="choice option" id="A">A.按部就班，听从安排</p>
				<p class="choice option" id="B">B.十分活跃，哪怕人山人海也要凑进去一谈究竟</p>
			</div>
			<div class="notebook" style="display:none">
				<img src="img/third.png" />
				<p class="subject">你觉得宝贝在生活中的状态？</p>
				<p class="choice option" id="A">A.很乖，很听话</p>
				<p class="choice option" id="B">B.呆萌，每天处在另一个次元</p>
				<p class="choice option" id="C">C.经常犯错，令人捉急</p>
				<p class="choice option" id="D">D.很开心，每天总能给自己快乐</p>
			</div>
			<div class="notebook" style="display:none">
				<img src="img/fouth.png" />
				<p class="subject">选择一个你认为宝贝相对更喜欢的旅途景象。</p>
				<p class="choice option" id="A">A.鸟语花香的森林里，和花蝴蝶窃窃私语</p>
				<p class="choice option" id="B">B.遨游外太空，看到各式各样的星球</p>
				<p class="choice option" id="C">C.漫步在人类博物馆，学习各类知识</p>
				<p class="choice option" id="D">D.玩遍游乐园里每一项好玩的</p>
			</div>
			<div class="subBtn" id="subBtn" style="margin-top:1.2rem;">
				<p>下一步</p>
				<span class="btnBg"></span>
			</div>
			<div class="subBtn" id="submit" style="margin-top:1.2rem;display:none;">
				<p>提&nbsp&nbsp交</p>
				<span class="btnBg"></span>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function(){
		var index = 0,pick = '',pickCol = '';
		$("#subBtn").on("click",function(e){
			if(pickCol != ''){
				if(index < 3){
					index ++;
					$(this).siblings('.notebook').hide();
					$(this).siblings('.notebook:eq('+index+')').show();
				}
				if(index == 3){
					$(this).hide();
					$(this).siblings('#submit').show();
				}
				pick == '' ? pick = pickCol : pick = pick +','+pickCol;
				pickCol = '';
			}
		});
		$("#submit").on("click",function(e){
			if(pickCol != ''){
				pick = pick +','+pickCol;
				window.location.href='./testShare.html?pick='+pick;
				index = 0,pick = '',pickCol = '';
			}
		});
		$(".choice").on("click",function(e){
			var index = $(this).index();
			$(this).siblings('.choice').removeClass('current').addClass('option');
			$(this).removeClass('option').addClass('current');
			pickCol = $(this).attr("id");
		});
	});
</script>
</body>

</html>