Question

我正在做一个简单的测验（一次一个问题的样式），这是JS代码：

$(document).ready(function(){   
    var item1 = document.getElementById('questionarea');
    var item2 = document.getElementById('answers');  
    var totalQuestions = $('.questionarea').size();
    var currentQuestion = 0;

    $questions = $('.questionarea');
    $questions.hide();

    $(".btn-lg").click(function(){
        $(this).hide();
        $(".progress").show();
        $(".answers").show();
        $($questions.get(currentQuestion)).fadeIn();
    });

    $('.answers').click(function() {
        $($questions.get(currentQuestion)).fadeOut(function () {
            currentQuestion += 1;
            $($questions.get(currentQuestion)).fadeIn();
        });
    });
});

它只能工作一次！对于第一个问题/答案。当我点击第二个问题的任何按钮答案时，没有任何反应！它不会消失，第三个问题永远不会出现。怎么回事？提前谢谢！

HTML：

<div class="col-lg-6 text-center">
    <button type="button" class="btn btn-primary btn-lg text-center" id="start">Start quiz</button></div>

<!-- QUIZ AREA -->

<!-- QUESTION & ANSWERS 1 -->   
  <div class="questionarea QA1 text-center">
    <ul class="col-lg-6 list-group text-center">
      <p class="list-group-item question1">Q1: How did you and your BFF meet?</p>
       </ul> 
<br>
   <div class="answers">
    <div id="row divoption1">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> At work </label></div>
<br>
    <div id="row divoption2">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Living together</label></div> 
<br>
    <div id="row divoption3"><label class="btn btn-primary">
      <input type="radio" name="options" id="option3"> Under unusual circumstances</label></div> 
<br>
    <div id="row divoption4">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option4"> In school</label></div></div>
  </div>  

<!-- QUESTION & ANSWERS 2 -->  
  <div class="questionarea QA2 text-center">
    <ul class="col-lg-6 list-group text-center">
      <p class="list-group-item question1">Q2: How would you describe your friendship?</p>
       </ul> 
<br>
    <div class="answers">
    <div id="row divoption1">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Needy </label></div>
<br>
    <div id="row divoption2">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Amazing</label></div> 
<br>
    <div id="row divoption3"><label class="btn btn-primary">
      <input type="radio" name="options" id="option3"> Deep</label></div> 
<br>
    <div id="row divoption4">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option4"> Family</label></div></div>

</div>

<!-- QUESTION & ANSWERS 3 -->  
  <div class="questionarea QA3 text-center">
    <ul class="col-lg-6 list-group text-center">
      <p class="list-group-item question1">Q3: What do you do together?</p>
       </ul> 
<br>
   <div class="answers">
    <div id="row divoption1">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Business </label></div>
<br>
    <div id="row divoption2">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Go out</label></div> 
<br>
    <div id="row divoption3"><label class="btn btn-primary">
      <input type="radio" name="options" id="option3"> Just hold each other</label>         </div> 
<br>
    <div id="row divoption4">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option4"> Play pranks on each other</label></div></div>  

    </div>

 <!-- QUESTION & ANSWERS 4 -->        
   <div class="questionarea QA4 text-center">
    <ul class="col-lg-6 list-group text-center">
      <p class="list-group-item question1">Q4: How often do you fight?</p>
       </ul> 
<br>
   <div class="answers">
    <div id="row divoption1">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Not much, but when we do, it's a big deal </label></div>
<br>
    <div id="row divoption2">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> We have lots of harmless tiffs</label></div> 
<br>
    <div id="row divoption3"><label class="btn btn-primary">
      <input type="radio" name="options" id="option3"> Sometimes</label>         </div> 
<br>
    <div id="row divoption4">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option4"> Play pranks on each other</label></div></div>    

  </div> 
<!-- ---- -->   

</div>   
</body>

Answer 1

我用你的代码创建了一个JSFiddle：https://jsfiddle.net/xr9d5rg1/（如果你下次可以自己做，那将非常有帮助：D）

有一些时髦的事情，我在代码上更新了几件事：

1 - 将.size()更新为.length，因为它已在上一个jQuery版本中更新（如果您使用较旧的jQuery版本，请将其忽略）

2 - 更新了点击引用，从$('.answers')到$('.answers input')，因此它不接受广播框外的点击次数;

3 - 更新了对问题的引用，例如用户1252748建议;

现在似乎正常运作;也许有一些奇怪的事件触发器正在进行，它将增量调用两次;

Jquery点击方法仅在我的测验中使用一次

1 个答案: