这是一个测验，我在一个页面中使用show / hide来显示每个问题。
＆＃34; .question＆＃34;的下一个（）元素不能正常工作，我尝试了几种不同的方法。有什么想法吗？
谢谢！
$(document).ready( function() {
$("#quizHome").show();
$("#begin").on('click', function () {
$("#quizHome").hide();
$(".question:first").show();
});
$(".question:first button").on('click', function (){
$(".question:first").hide();
$(this).closest(".question:first").next().show();
});
$(".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();
$("#captain").show();
$("#ironMan").hide();
$("#blackWidow").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();
$("#captain").hide();
$("#ironMan").show();
$("#blackWidow").hide();
} else {
$("#bkgHome").hide();
$("#question1").hide();
$("#question2").hide();
$("#question3").hide();
$("#question4").hide();
$("#question5").hide();
$("#question6").hide();
$("#question7").hide();
$("#results").hide();
$("#captain").hide();
$("#ironMan").hide();
$("#blackWidow").show();
}});
});@charset "UTF-8";
/* CSS Document */
* {
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;
display:none;
}
.question {
width:100%;
height:800px;
text-align:center;
display:none;
}
.results {
width:100%;
height:800px;
text-align:center;
display:none;
}
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.7.2/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>
</ul>
</div>
</div>
<div id="bkg1">
<div class="question">
<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 class="question">
<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 class="question">
<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>
答案 0 :(得分：0)
如果查看jQuery文档，它会指出.next()将get the immediately following sibling of each element in the set of matched elements.
您无法选择$(".question:first").next()，因为$(".question:first")没有任何兄弟姐妹。仔细看看你的HTML。