jQuery按钮不显示下一个问题[关闭]

Question

我正在做一个关于 YouTube 的测验。我有三个工作问题，但第四个问题没有按照应有的方式与其他问题一起工作。下一个按钮可以工作，但是对于第三个和第四个问题之间的切换不会一直切换。当您单击它时，它将隐藏第三个，但不会显示第四个。我已经多次查看代码，但我无法解决问题。

CSS：

.question1 {
  text-align: center;
  height: 20px;
  width: 440px;
  background-color: lightblue;
}

li {
  position: relative;
  left: -20px;
  cursor: pointer;
  padding-top: 15px;
  padding-bottom: 15px;
}

.check {
  font-size: 20px;
  color: green;
}

span {
  font-size: 15px;
}

.score {
  position: absolute;
  top: 0px;
  left: 98.5%;
  font-size: 25px;
}

.q1a3cover {
  color: green;
}

.next1 {
  position: absolute;
  top: 125px;
  left: 500px;
  height: 50px;
  width: 75px;
  background-color: cadetblue;
  border: 3px solid olivedrab;
  border-radius: 5px;
  cursor: pointer;
}

.question2 {
  text-align: center;
  height: 20px;
  width: 475px;
  background-color: lightblue;
}

.q2a3cover {
  color: green;
}

.next2 {
  position: absolute;
  top: 125px;
  left: 500px;
  height: 50px;
  width: 75px;
  background-color: cadetblue;
  border: 3px solid olivedrab;
  border-radius: 5px;
  cursor: pointer;
}

.question3 {
  text-align: center;
  height: 20px;
  width: 310px;
  background-color: lightblue;
}

.q3a2cover {
  color: green;
}

.next3 {
  position: absolute;
  top: 125px;
  left: 500px;
  height: 50px;
  width: 75px;
  background-color: cadetblue;
  border: 3px solid olivedrab;
  border-radius: 5px;
  cursor: pointer;
}

.question4 {
  text-align: center;
  height: 20px;
  width: 310px;
  background-color: lightblue;
}

.q4a4cover {
  color: green;
}

.next4 {
  position: absolute;
  top: 125px;
  left: 500px;
  height: 50px;
  width: 75px;
  background-color: cadetblue;
  border: 3px solid olivedrab;
  border-radius: 5px;
  cursor: pointer;
}

html:

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>

<div class="scorebox">
  <div class="score"><b>0</b></div>
</div>

<!-- question one ↓ -->
<div class="q1">
  <div class="question1"><b>How many subscribers do you need to make a community post?</b></div>

  <ul class="q1as">
    <li class="q1a1">0 <span class="q1x1">❌</span></li>
    <li class="q1a2">500 <span class="q1x2">❌</span></li>
    <li class="q1a3">1000</li>
    <li class="q1a3cover">1000 <span class="check">✔</span></li>
    <li class="q1a4">1500 <span class="q1x3">❌</span></li>
    <li class="q1a5">2000 <span class="q1x4">❌</span></li>
  </ul>

  <button class="next1"><b>Next</b></button>
</div>

<!-- question two ↓ -->
<div class="q2">
  <div class="question2"><b>What is the maximum amount a replies you can have on a <i>comment</i>?</b></div>

  <ul class="q2as">
    <li class="q2a1">0 <span class="q2x1">❌</span></li>
    <li class="q2a2">250 <span class="q2x2">❌</span></li>
    <li class="q2a3">500</li>
    <li class="q2a3cover">500 <span class="check2">✔</span></li>
    <li class="q2a4">750 <span class="q2x3">❌</span></li>
    <li class="q2a5">1000 <span class="q2x4">❌</span></li>
  </ul>

  <button class="next2"><b>Next</b></button>
</div>

<!-- question three ↓ -->
<div class="q3">
  <div class="question3"><b>What is the most viewed video on YouTube?</b></div>

  <ul class="q3as">
    <li class="q3a1">"Despacito"- Luis Fonsi<span class="q3x1"><b> -7.64B</b> ❌</span></li>
    <li class="q3a2">"Baby Shark Dance"- Pinkfong</li>
    <li class="q3a2cover">"Baby Shark Dance"- Pinkfong<span class="check3"><b> -9.75B</b> ✔</span></li>
    <li class="q3a3">"Shape of You"- Ed Sheeran<span class="q3x2"> -5.54B ❌</span></li>
    <li class="q3a4">"Uptown Funk"- Mark Ronson<span class="q3x3"> -4.38B ❌</span></li>
    <li class="q3a5">"See You Again"- Wiz Khalifa<span class="q3x4"> -5.34B ❌</span></li>
  </ul>

  <button class="next4"><b>Next</b></button>
</div>

<!-- question four ↓ -->
<div class="q4">
  <div class="question4"><b>What does YouTube send you when you reach 50,000,000 subscribers?</b></div>

  <ul class="q4as">
    <li class="q4a1">Silver Play Button<span class="q4x1"><b> - 100,000</b> ❌</span></li>
    <li class="q4a2">Diamond Play Button<span class="q4x2"><b> - 10,000,000</b> ❌</span></li>
    <li class="q4a3">Gold Play Button<span class="q4x3"><b> - 1,000,000</b> ❌</span></li>
    <li class="q4a4">Ruby Play Button</li>
    <li class="q4a4cover">Ruby Play Button<span class="check4"><b> - 50,000,000</b> ✔</span></li>
    <li class="q4a5">Nothing<span class="q4x4"> ❌</span></li>
  </ul>

  <button class="next4"><b>Next</b></button>
</div>

jQuery:

score = 0;

$(document).ready(function () {
  $("span, .check, .check2, .check3, .check4").hide();
  $(".q1a3cover").hide();
  $(".q2a3cover").hide();
  $(".q3a2cover").hide();
  $(".q4a4cover").hide();
  $(".q2").hide();
  $(".q3").hide();
  $(".q4").hide();

  //question 1 ↓
  $(".q1as").click(function () {
    $(".check").show();
    $(".q1a3cover").show();
    $(".q1a3").hide();
  });

  //answers ↓
  $(".q1a1").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q1x1").show();
  });
  $(".q1a2").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q1x2").show();
  });
  $(".q1a3").click(function () {
    $(".score").text((score += 1));
  });
  $(".q1a4").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q1x3").show();
  });
  $(".q1a5").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q1x4").show();
  });

  //next button ↓
  $(".next1").click(function () {
    $(".q1").hide();
    $(".q2").show();
  });

  //second question ↓
  $(".q2as").click(function () {
    $(".q2a3cover").show();
    $(".q2a3").hide();
    $(".check2").show();
  });

  //answers ↓
  $(".q2a1").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q2x1").show();
  });
  $(".q2a2").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q2x2").show();
  });
  $(".q2a3").click(function () {
    $(".score").text((score += 1));
  });
  $(".q2a4").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q2x3").show();
  });
  $(".q2a5").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q2x4").show();
  });

  //next button ↓
  $(".next2").click(function () {
    $(".q1").hide();
    $(".q2").hide();
    $(".q3").show();
  });

  //third question ↓
  $(".q3as").click(function () {
    $(".q3a2cover").show();
    $(".q3a2").hide();
    $(".check3").show();
  });

  //answers ↓
  $(".q3a1").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q3x1").show();
  });
  $(".q3a2").click(function () {
    $(".score").text((score += 1));
  });
  $(".q3a3").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q3x2").show();
  });
  $(".q3a4").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q3x3").show();
  });
  $(".q3a5").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q3x4").show();
  });

  //next button ↓
  $(".next3").click(function () {
    $(".q1").hide();
    $(".q2").hide();
    $(".q3").hide();
    $(".q4").show();
  });

  //fourth question ↓
  $(".q4as").click(function () {
    $(".q4a4cover").show();
    $(".q4a4").hide();
    $(".check4").show();
  });

  //answers ↓
  $(".q4a1").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q4x1").show();
  });
  $(".q4a2").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q4x2").show();
  });
  $(".q4a3").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q4x3").show();
  });
  $(".q4a4").click(function () {
    $(".score").text((score += 1));
  });
  $(".q4a5").click(function () {
    $(this).css("color", "#9A1B1E");
    $(".q4x4").show();
  });

  //next button ↓
  $(".next4").click(function () {
    $(".q1").hide();
    $(".q2").hide();
    $(".q3").hide();
    $(".q4").hide();
    $(".q5").show();
  });
});

Answer 1

改变：

<button class="next4"><b>Next</b></button>

问题三部分到：

<button class="next3"><b>Next</b></button>