jQuery按鈕未顯示下一個問題-有解無憂

我正在做一個關于 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();
  });
});

uj5u.com熱心網友回復：

改變：

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

在問題三部分：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/372150.html

標籤：html 查询 css

上一篇：限制惰性列中的專案

下一篇：如何訪問創建html后附加的串列元素