测验结果页面未正确显示Jquery

时间：2015-01-21 15:56:23

标签： javascript jquery

我创建了一个包含7个问题的测验。每个问题在按钮中都有一个值，直到达到结果页面为止。最后，我希望它根据累积值显示图像。它是一种工作，但在各地转移。第一个结果也出现在整个测验中。

此外，如果您对如何更好地简化此代码有任何建议，我将不胜感激。

此外，不确定为什么问题2没有在这篇文章中正确显示所有按钮，但它确实在我的结尾正常运行。

谢谢！

$(document).ready( function() {
	function qHome () {
		$("#bkgHome").show();
		$("#question1").hide();
		$("#question2").hide();
		$("#question3").hide();
		$("#question4").hide();
		$("#question5").hide();
		$("#question6").hide();
		$("#question7").hide();
		$("#results").hide();
		$("#goat").hide();
		$("#fish").hide();
		$("#bird").hide();
	}
	$(qHome).on("load", qHome);
	
	
	
	function queHomeClick () {
		$("#bkgHome").hide();
		$("#question1").show();
		$("#question2").hide();
		$("#question3").hide();
		$("#question4").hide();
		$("#question5").hide();
		$("#question6").hide();
		$("#question7").hide();
		$("#results").hide();
		$("#goat").hide();
		$("#fish").hide();
		$("#bird").hide();
	}
	$("#begin").on('click', queHomeClick);
	
		function que1Click () {
		$("#bkgHome").hide();
		$("#question1").hide();
		$("#question2").show();
		$("#question3").hide();
		$("#question4").hide();
		$("#question5").hide();
		$("#question6").hide();
		$("#question7").hide();
		$("#results").hide();
		$("#goat").hide();
		$("#fish").hide();
		$("#bird").hide();
	}
	$("#scary_height").on('click', que1Click);
	$("#small_space").on('click', que1Click);
	$("#scary_fire").on('click', que1Click);
	$("#scary_animals").on('click', que1Click);
	
		function que2Click () {
		$("#bkgHome").hide();
		$("#question1").hide();
		$("#question2").hide();
		$("#question3").show();
		$("#question4").hide();
		$("#question5").hide();
		$("#question6").hide();
		$("#question7").hide();
		$("#results").hide();
		$("#goat").hide();
		$("#fish").hide();
		$("#bird").hide();
	}
	$("#goat").on('click', que2Click);
	$("#fish").on('click', que2Click);
	$("#bird").on('click', que2Click);
	$("#snake").on('click', que2Click);

			function queresults () {
		$("#bkgHome").hide();
		$("#question1").hide();
		$("#question2").hide();
		$("#question3").hide();
		$("#question4").hide();
		$("#question5").hide();
		$("#question6").hide();
		$("#question7").hide();
		$("#results").hide();
		$("#goat").hide();
		$("#fish").hide();
		$("#bird").hide();
	}

	
	$(".price").hide();
	$("button").on('mouseenter', function() {
		$(this).closest('.box').find('.blue').addClass('samColor');
	});
	$("button").on('mouseleave', function() {
		$(this).closest('.box').find('.blue').removeClass('samColor');
	});
	$("button").on('click', function() {
		$('.box').removeClass('transBox');
		$(this).closest('.box').addClass('transBox');
	});
	$(".sale").on('click',function() {
		$(".price").fadeIn().show();
	});
	

var accumValue = 0;

$("button").on('click', function() {

    if(!$(this).attr('value')) {
        return;
    }

    accumValue += parseInt($(this).attr('value'), 10);
});

$('#finalbutton').on('click', function() {
if (accumValue <=25) {
		$("#bkgHome").hide();
		$("#question1").hide();
		$("#question2").hide();
		$("#question3").hide();
		$("#question4").hide();
		$("#question5").hide();
		$("#question6").hide();
		$("#question7").hide();
		$("#results").hide();
		$("#goat").show();
		$("#fish").hide();
		$("#bird").hide();

} else if (accumValue > 25 && accumValue <= 70) {
		$("#bkgHome").hide();
		$("#question1").hide();
		$("#question2").hide();
		$("#question3").hide();
		$("#question4").hide();
		$("#question5").hide();
		$("#question6").hide();
		$("#question7").hide();
		$("#results").hide();
		$("#goat").hide();
		$("#fish").show();
		$("#bird").hide();
} else {
		$("#bkgHome").hide();
		$("#question1").hide();
		$("#question2").hide();
		$("#question3").hide();
		$("#question4").hide();
		$("#question5").hide();
		$("#question6").hide();
		$("#question7").hide();
		$("#results").hide();
		$("#goat").hide();
		$("#fish").hide();
		$("#bird").show();
}}); 	

});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#bkgHome {
	  background-image: url(images/texture-1.jpg);
}

#bkg1 {
	  background-image: url(images/texture-1.jpg);
}
#bkg2 {
	  background-image: url(images/texture-1.jpg);
}
#bkg3 {
	  background-image: url(images/texture-1.jpg);
}
#bkg4 {
	  background-image: url(images/texture-1.jpg);
}
#bkg5 {
	  background-image: url(images/texture-1.jpg);
}
#bkg6 {
	  background-image: url(images/texture-1.jpg);
}
#bkg7 {
	  background-image: url(images/texture-1.jpg);
}
#bkg8 {
	  background-image: url(images/texture-1.jpg);
}
#bkg9 {
	  background-image: url(images/texture-1.jpg);
}
#bkg10 {
	  background-image: url(images/texture-1.jpg);
}
#quizHome {
	width:100%;
	height:800px;
	text-align:center;
}
#question1 {
	width:100%;
	height:800px;
	text-align:center;
}

#question2 {
	width:100%;
	height:800px;
	text-align:center;
}
#question3 {
	width:100%;
	height:800px;
	text-align:center;
}
#question4 {
	width:100%;
	height:800px;
	text-align:center;
}
#question5 {
	width:100%;
	height:800px;
	text-align:center;
}
#question6 {
	width:100%;
	height:800px;
	text-align:center;
}
#question7 {
	width:100%;
	height:800px;
	text-align:center;
}
.results {
	width:100%;
	height:800px;
	text-align:center;
}

h1, h2 {
	font-family:Arial, Helvetica, sans-serif;
}
li {
		list-style-type:none;
}
.box {
	width: 250px;
	height: 250px;
	background-color:rgba(102,102,102,0.7);
	display:inline-block;
	margin-right:50px;
	text-align:center;
	padding-top:25px;
	line-height:40px;
	padding-bottom:25px;
	box-shadow: 10px 10px 5px rgba(5,5,5,0.6);
	border-radius: 20px;
	
}
.transBox {
	width: 250px;
	height: 250px;
	background-color:rgba(58,57,57,0.8);
	display:inline-block;
	margin-right:50px;
	text-align:center;
}

.city {
	font-size: 18px;
	font-family:Arial, Helvetica, sans-serif;

}
.blue {
	background-color: rgba(90,19,17,0.6);
	width:150px;
	height: 40px;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	border-radius: 10px;

}
.samColor {
	background-color:rgba(18,17,23,0.6);;
	width:150px;
	height: 40px;
	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
	border-radius: 10px;
	color:#ffffff;


}

.thumbs {
	border-radius:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bkgHome">
<div id="quizHome">
 <ul>
    <li class="box one">
      <ul>
       <li class="photos">
          <span class="city">Are you ready?</span>
       </li>
      </ul>
     <button class="blue" id="begin" value="0">BEGIN</button>
    </li>
</div>
</div>

<div id="bkg1">
<div id="question1">
<h1>Which character are you? Total:</h1>
 <ul>
    <li class="box one">
      <ul>
       <li class="photos">
          <span class="city">Being in high places.</span>
        <img src="images/heights.jpg" class="thumbs" width="100">
       </li>
      </ul>
     <button class="blue" id="scary_height" value="5">ANSWER  1</button>
    </li>
    <li class ="box two">
            <ul>
       <li class="photos">
       <span class="city">Being in small spaces.</span>
        <img src="images/smallSpace.jpg" class="thumbs" width="100">
       </li>
     <button class="blue" id="small_space" value="10">ANSWER 2</button>
      </ul>
    </li>
    <li class = "box three">
      <ul>
       <li class="photos">
          <span class="city">The fear of wild fire.</span>
        <img src="images/fire.jpg" class="thumbs" width="100">
       </li>
      </ul>
     <button class="blue" id="scary_fire" value="15">ANSWER  3</button>
    </li>
    <li class = "box four">
      <ul>
       <li class="photos">
          <span class="city">Being around scary animals.</span>
        <img src="images/scaryAnimals.jpg" class="thumbs" width="100">
       </li>
      </ul>
     <button class="blue" id="scary_animals"value="20">ANSWER  4</button>
    </li>
 </ul>
</div>
</div>

<div id="bkg2">
<div id="question2">
<h1>Which character are you?</h1>
 <ul>
    <li class="box one">
     <h2>QUESTION 2 </h2>
     <button class="blue" id="goat" value="5">ANSWER  1</button>
      <ul>
       <li class="photos">
          <span class="city">Being in high places.</span>
        <img src="images/heights.jpg" class="thumbs" width="100">
       </li>
      </ul>
    </li>
    <li class ="box two">
     <h2>Box Two <span class="price"> $100</span></h2>
     <button class="blue" id="bird" value="10">ANSWER 2</button>
            <ul>
       <li class="photos">
       <span class="city">Being in small spaces.</span>
        <img src="images/smallSpace.jpg" class="thumbs" width="100">
       </li>
      </ul>
    </li>
    <li class = "box three">
     <h2>Box Two <span class="price"> $100</span></h2>
     <button class="blue" id="fish" value="15">ANSWER  3</button>
      <ul>
       <li class="photos">
          <span class="city">The fear of wild fire.</span>
        <img src="images/fire.jpg" class="thumbs" width="100">
       </li>
      </ul>
    </li>
    <li class = "box four">
     <h2>Box Two <span class="price"> $100</span></h2>
     <button class="blue" id="snake" value="20">ANSWER  4</button>
      <ul>
       <li class="photos">
          <span class="city">Being around scary animals.</span>
        <img src="images/scaryAnimals.jpg" class="thumbs" width="100">
       </li>
      </ul>
    </li>
 </ul>
</div>
</div>


<div id="bkg3">
<div id="question3">
<h1>Which character are you?</h1>
 <ul>
    <li class="box one">
     <h2>QUESTION 3 <span class="price"> $100</span></h2>
     <button class="blue" value="5">ANSWER  1</button>
      <ul>
       <li class="photos">
          <span class="city">Being in high places.</span>
        <img src="images/heights.jpg" class="thumbs" width="100">
       </li>
      </ul>
    </li>
    <li class ="box two">
     <h2>Box Two <span class="price"> $100</span></h2>
     <button class="blue" value="10">ANSWER 2</button>
            <ul>
       <li class="photos">
       <span class="city">Being in small spaces.</span>
        <img src="images/smallSpace.jpg" class="thumbs" width="100">
       </li>
      </ul>
    </li>
    <li class = "box three">
     <h2>Box Two <span class="price"> $100</span></h2>
     <button class="blue" value="15">ANSWER  3</button>
      <ul>
       <li class="photos">
          <span class="city">The fear of wild fire.</span>
        <img src="images/fire.jpg" class="thumbs" width="100">
       </li>
      </ul>
    </li>
    <li class = "box four">
     <h2>Box Two <span class="price"> $100</span></h2>
     <button class="blue" value="20">ANSWER  4</button>
      <ul>
       <li class="photos">
          <span class="city">Being around scary animals.</span>
        <img src="images/scaryAnimals.jpg" class="thumbs" width="100">
       </li>
      </ul>
    </li>
 </ul>
 <button id="finalbutton">Get Results</button>

</div>
</div>
  
    <div id="bkg8">
<div class="results">
<div id="goat">
<h1>Congratulations!  You are a goat!</h1>
<p><img src="images/hammer.png" /></p>
</div>
</div>
</div>

<div id="bkg9">
<div class="results">
<div id="fish">
<h1>Congratulations!  You a fish!</h1>
<p><img src="images/pliers.png" /></p>
</div>
</div>
</div>

<div id="bkg10">
<div class="results">
<div id="bird">
<h1>Congratulations!  You are a bird!</h1>
<p><img src="images/hammer.png" /></p>
</div>
</div>
</div>

1 个答案:

答案 0 :(得分：0)

简化它的一种方法是给每个问题一个question类，然后在隐藏时将其作为目标。首先隐藏所有内容，然后显示您想要的问题。例如

function queHomeClick () {
    $("#bkgHome").hide();
    $("#question1").show();
    $("#question2").hide();
    $("#question3").hide();
    $("#question4").hide();
    $("#question5").hide();
    $("#question6").hide();
    $("#question7").hide();
    $("#results").hide();
    $("#goat").hide();
    $("#fish").hide();
    $("#bird").hide();
}
$("#begin").on('click', queHomeClick);

会变成

function queHomeClick () {
    $(".question").hide();
    $("#question1").show();
}
$("#begin").on('click', queHomeClick);

事实上，您可以通过将此代码直接放在on方法中而不需要单独的函数来简化它

$("#begin").on('click', function () {
    $(".question").hide();
    $("#question1").show();
});

虽然qHome是一个函数，但您的启动代码似乎已附加到qHome的行为。如果你只想让它运行onload，你可以把它放在文档就绪函数

中
相关问题
最新问题