我创建了一个包含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>
答案 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，你可以把它放在文档就绪函数