Javascript 测验 - 通过 jQuery 上的 next() 方法到达下一个同级的问题

Question

我正在使用 JavaScript 创建一个测验，尝试使用 jQuery 一次出现 1 个问题。通过隐藏其他元素，我能够让 html 在页面上仅显示一个问题，但由于某种原因，我无法显示下一个同级元素。 jQuery API Documentation说 next() 方法到达了同级元素，但我不确定问题出在哪里。

我的 jQuery 代码是。

  function main()
  {
    $('.slide').hide();
    $('.active-slide').show();

    var currentSlide = $('.active-slide')
    var nextSlide = currentSlide.next();

    $('.btnNext').click(function() {
      currentSlide.removeClass('active-slide');
      nextSlide.addClass('active-slide');
    })

  }
  $(document).ready(main);

我的 HTML 是。

        <div class="slide active-slide">
          <h3>Question 1: Answer is A! </h3>
          <input type="radio" name="q1" value="correct">A</input><br>
          <input type="radio" name="q1" value="incorrect">B</input><br>
          <input type="radio" name="q1" value="incorrect">C</input><br>
          <input type="radio" name="q1" value="incorrect">D</input>
          <input type="button" class="btnNext" value="Next">
        </div>
        <div class="slide">
          <h3>Question 2: Answer is B! </h3>
          <input type="radio" name="q2" value="incorrect">A</input><br>
          <input type="radio" name="q2" value="correct">B</input><br>
          <input type="radio" name="q2" value="incorrect">C</input><br>
          <input type="radio" name="q2" value="incorrect">D</input>
          <input type="button" class="btnNext" value="Next">
        </div>

Chrome 上的控制台没有显示任何错误，这使得查找起来更加困难。

感谢您的帮助。

Answer 1

第一个问题是 jQuery 选择器的结果不是live，这意味着如果元素的选择器属性发生更改，缓存的对象将不会更新。因此，您需要在事件处理程序中找到事件幻灯片。

第二个问题可能与CSS有关，因为您使用hide()来隐藏元素，它将使用内联display规则，但要显示返回元素，您仅设置可能具有较低顺序规则的 active-slide 类。

function main() {

  $('.btnNext').click(function() {
    var currentSlide = $('.active-slide').removeClass('active-slide');
    currentSlide.next().addClass('active-slide');
  })

}
$(document).ready(main);

.slide {
  display: none;
}
.slide.active-slide {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide active-slide">
  <h3>Question 1: Answer is A! </h3>
  <input type="radio" name="q1" value="correct">A
  <br>
  <input type="radio" name="q1" value="incorrect">B
  <br>
  <input type="radio" name="q1" value="incorrect">C
  <br>
  <input type="radio" name="q1" value="incorrect">D
  <input type="button" class="btnNext" value="Next">
</div>
<div class="slide">
  <h3>Question 2: Answer is B! </h3>
  <input type="radio" name="q2" value="incorrect">A
  <br>
  <input type="radio" name="q2" value="correct">B
  <br>
  <input type="radio" name="q2" value="incorrect">C
  <br>
  <input type="radio" name="q2" value="incorrect">D
  <input type="button" class="btnNext" value="Next">
</div>