javascript - 为什么我的 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') 它将单击事件应用于所有按钮。它应该是#button，因此该事件仅适用于id为button的按钮。

// $("button").click(function() {     
$("#button").click(function() {     
    $("#header").animate({
        opacity: '0.2',
        width: 'hide'
    }, '500');
    $("#one").animate({
        width: 'show'
    });
});

这只是一个建议，您可以轻松地将其更新为由一键单击事件处理。您可以向每个 div 添加一类 question 并使用 jQuery closest()捕获那个div来隐藏它。然后您可以使用 jQuery next()捕获下一个问题 div 并显示它。希望这能让你朝着正确的方向前进。由于这是为了学校，我将让您将这些点连接起来。