我试图为学校的测验制作布局。我现在才开始，我的想法是在按钮的下一个问题＆＃39;点击。
问题出现在第二个问题之后，因为不是第一个问题开始隐藏，而是第二个问题。
我尝试添加额外的行，例如$("#one").hide();，但它没有做任何事情。
我不确定我做错了什么，我只是新编码，所以我很感激帮助。
PS：不要介意我想要首先获得布局的文字。
$(document).ready(function() {
"use strict";
$("#one").hide();
$("#two").hide();
$("#three").hide();
$("#four").hide();
$("button").click(function() {
$("#header").animate({
opacity: '0.2',
width: 'hide'
}, '500');
$("#one").animate({
width: 'show'
});
});
$("#button1").click(function(e) {
$("#one").animate({
opacity: '0.2',
height: 'hide'
});
e.stopPropagation();
$("#two").animate({
width: 'show'
});
});
$("#button2").click(function() {
$("#two").animate({
opacity: '0.2',
height: 'hide'
}, '500');
$("#three").animate({
width: 'show'
});
});
$("#button3").click(function() {
$("#three").animate({
opacity: '0.2',
height: 'hide'
}, '500');
$("#four").animate({
width: 'show'
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right">
<div id="header">
<h1>SUBCULTURE <br> FASHION</h1>
<p>Aliquam ac leo ipsum.....</p>
<button id="button">Start quiz</button>
</div>
<div id="one">
<h2>Question 1</h2>
<h3>What colour pallete do you prefer?</h3>
<form action="">
<input type="radio" name="colour" value="male"> Brown, Baige, Pale<br>
<input type="radio" name="colour" value="female"> Black, Grey, Silver<br>
<input type="radio" name="colour" value="other"> Pink, Blue, Purple<br>
<input type="radio" name="colour" value="him"> White, White and only white
</form>
<button id="button1">Next Question</button>
</div>
<div id="two">
<h2>Question 2</h2>
<h3>What is your favourite teddy bear?</h3>
<form action="">
<input type="radio" name="colour" value="male"> Brown, Baige, Pale<br>
<input type="radio" name="colour" value="female"> Black, Grey, Silver<br>
<input type="radio" name="colour" value="other"> Pink, Blue, Purple<br>
<input type="radio" name="colour" value="him"> White, White and only white
</form>
<button id="button2">Next Question</button>
</div>
<div id="three">
<h2>Question 3</h2>
<h3>What is your favourite teddy bear?</h3>
<form action="">
<input type="radio" name="colour" value="male"> Brown, Baige, Pale<br>
<input type="radio" name="colour" value="female"> Black, Grey, Silver<br>
<input type="radio" name="colour" value="other"> Pink, Blue, Purple<br>
<input type="radio" name="colour" value="him"> White, White and only white
</form>
<button id="button3">Next Question</button>
</div>
<div id="four">
<h2>Question 4</h2>
<h3>What is your favourite teddy bear?</h3>
<form action="">
<input type="radio" name="colour" value="male"> Brown, Baige, Pale<br>
<input type="radio" name="colour" value="female"> Black, Grey, Silver<br>
<input type="radio" name="colour" value="other"> Pink, Blue, Purple<br>
<input type="radio" name="colour" value="him"> White, White and only white
</form>
<button id="button4">Next Question</button>
</div>
</div>
这是指向JFiddle的链接：http://jsfiddle.net/xpvt214o/120767/
答案 0 :(得分：3)
问题在于您第一次点击按钮。您正在使用$('button')将点击事件应用于所有按钮。它应该是#button，因此该事件仅适用于ID为按钮的按钮。
// $("button").click(function() {
$("#button").click(function() {
$("#header").animate({
opacity: '0.2',
width: 'hide'
}, '500');
$("#one").animate({
width: 'show'
});
});
只是推荐，您可以轻松更新此内容，以便通过一键点击事件进行处理。您可以为每个div添加一个question类，并使用jQuerys closest()来抓取该div以隐藏它。然后，您可以使用jQuerys next()来获取下一个问题div并显示它。希望这会让你走向正确的道路。由于这是为了学校，我会留下你连接点。
答案 1 :(得分：0)
如果有意义，请尝试重用代码。还使用描述性名称，它将有助于防止＆＃34;＃按钮＆＃34;与＆＃34;按钮＆＃34;如果您有<button id="btn-start">
我在下面的代码中对效率进行了一些更改。
<div id="right">
<div id="header">
<h1>SUBCULTURE <br> FASHION</h1>
<p>Aliquam ac leo ipsum. Curabitur imperdiet mi sed tortor iaculis, sed commodo neque euismod. Sed tempus interdum venenatis. Nullam auctor placerat porttitor. Donec faucibus lectus leo, non ornare libero varius ut. Ut nisi augue, laoreet vel blandit et, interdum vel quam. Maecenas auctor aliquet ante at auctor. Sed facilisis nulla et porttitor posuere. Praesent hendrerit odio non nunc venenatis ornare. Maecenas varius ac justo vel rhoncus. Suspendisse potenti. Nulla porta malesuada neque, a sagittis lacus pretium at. Duis vitae turpis ut ligula porttitor consequat. Quisque bibendum laoreet scelerisque. Morbi sed tellus vel odio eleifend cursus at non ex. Donec semper lorem sed mauris feugiat.</p>
<button data-next="one">Start quiz</button>
</div>
<div id="one" class="question">
<h2>Question 1</h2>
<h3>What colour pallete do you prefer?</h3>
<form action="">
<input type="radio" name="colour" value="male"> Brown, Baige, Pale<br>
<input type="radio" name="colour" value="female"> Black, Grey, Silver<br>
<input type="radio" name="colour" value="other"> Pink, Blue, Purple<br>
<input type="radio" name="colour" value="him"> White, White and only white
</form>
<button data-next="two">Next Question</button>
</div>
<div id="two" class="question"><h2>Question 2</h2>
<h3>What is your favourite teddy bear?</h3>
<form action="">
<input type="radio" name="colour" value="male"> Brown, Baige, Pale<br>
<input type="radio" name="colour" value="female"> Black, Grey, Silver<br>
<input type="radio" name="colour" value="other"> Pink, Blue, Purple<br>
<input type="radio" name="colour" value="him"> White, White and only white
</form>
<button data-next="three">Next Question</button>
</div>
<div id="three" class="question"><h2>Question 3</h2>
<h3>What is your favourite teddy bear?</h3>
<form action="">
<input type="radio" name="colour" value="male"> Brown, Baige, Pale<br>
<input type="radio" name="colour" value="female"> Black, Grey, Silver<br>
<input type="radio" name="colour" value="other"> Pink, Blue, Purple<br>
<input type="radio" name="colour" value="him"> White, White and only white
</form>
<button data-next="four">Next Question</button>
</div>
<div id="four" class="question"><h2>Question 4</h2>
<h3>What is your favourite teddy bear?</h3>
<form action="">
<input type="radio" name="colour" value="male"> Brown, Baige, Pale<br>
<input type="radio" name="colour" value="female"> Black, Grey, Silver<br>
<input type="radio" name="colour" value="other"> Pink, Blue, Purple<br>
<input type="radio" name="colour" value="him"> White, White and only white
</form>
<button>Next Question</button>
</div>
</div>
脚本更改
$(document).ready(function(){
"use strict";
$(".question").hide(); // hide everything with "question" class.
$("button[data-next]").click(function(){ // when any button that has a "data-next" attribute is clicked. (in this case all buttons except #four)
$(this).parent().animate({
opacity: '0.2',
width: 'hide'}, '500'
);
// get the "data-next" attribute (from the button) and prepend a hash so jQuery can look it up by id.
$("#" + $(this).data("next")).animate({
width: 'show'
});
});
});