为什么我的div没有隐藏在jQuery中？

Question

我正在尝试为学校的测验做一个布局。 我现在才刚刚开始，其想法是在单击“下一个问题”按钮时使问题消失。

该问题出现在第二个问题之后，因为不是第一个问题开始隐藏，而是不是。

我尝试添加额外的行，例如$("#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/

Answer 1

问题出在您第一次单击按钮上。 您正在使用$('button') ，它将click事件应用于所有按钮。 它应该是#button因此该事件仅适用于ID为button的按钮。

// $("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并显示它。 希望这会使您朝着正确的方向前进。 因为这是上学的课程，所以我将让您保持联系。

Answer 2

如果有意义，请尝试重用代码。 还使用描述性名称，如果您遇到类似<button id="btn-start">类的问题，它将有助于防止出现“ #button”和“ button”问题

为了提高效率，我在下面的代码中做了一些更改。

<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'
        });
    });
});