為什么我的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'
        });
    });
});