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

Posted 2023-03-04

【中文标题】Javascript 测验 - 通过 jQuery 上的 next() 方法到达下一个兄弟的问题

【英文标题】：Javascript Quiz - problems reaching the next sibling through next() method on jQuery

【发布时间】：2017-01-25 07:38:08

【问题描述】：

我正在使用 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 上的控制台没有显示任何错误，因此很难找到。

感谢您的帮助。

【问题讨论】：

如果您希望每次课程更改时这两个变量都会进行实时更新，那么您会失望的。您需要在 click 处理程序中获取当前和下一张幻灯片，如果这是您所追求的。不过应该第一次工作。

在处理程序中移动var currentSlide = $('.active-slide') var nextSlide = currentSlide.next();

@squint 感谢您的评论，即使是第一次也无法正常工作，所以也许我做错了什么？

@ArunPJohny 根本没有帮助

我讨厌 JQuery！我会告诉你一个 Vanilla JS 解决方案

【参考方案1】：

您的问题是您只运行 jQuery hide 和 show 函数一次；更改 divs 的类不会再次运行该代码。你的 jQuery 需要做类似this JSFiddle 的事情。

这样，每次更改类时都会更新显示的div。

【讨论】：

哇，这真是太棒了@Preston159，这很有意义！我对 jQuery 的工作原理有了更好的理解。谢谢

【参考方案2】：

第一个问题是 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>

【讨论】：

哇，阿伦，天才！谢谢你解决了整个问题！