JQuery Klick-Methode funktioniert nur einmal in meinem Quiz

Question

Ich bin ein einfaches Quiz machen (im Stil einer Frage zu einem Zeitpunkt), das ist der JS-Code:

$(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(); 
     }); 
    }); 
}); 

Und es funktioniert aber nur einmal ! für die erste Frage/Antworten. Wenn ich auf eine der Antworten der zweiten Frage klicke, passiert nichts! Es verblasst nicht und die dritte Frage erscheint nie. Was ist los? Danke im Voraus!

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

habe ich eine JSFiddle mit Ihrem Code: https://jsfiddle.net/xr9d5rg1/ (wenn Sie es selbst das nächste Mal tun können, wäre sehr hilfreich: D)

Es war etwas flippiger los aktualisiert .size()-.length, wie es in der letzten jQuery-Version aktualisiert wird worden (es ignorieren, wenn Sie verwenden eine ältere Version von jQuery sind)

-

1: ich ein paar Dinge auf dem Code aktualisiert

2 - Die Klickreferenz von $('.answers') auf $('.answers input') wurde aktualisiert, sodass keine Klicks außerhalb von Radiokästen akzeptiert werden.

3 - Aktualisierte den Verweis auf die Frage, wie der Benutzer 1252748 vorgeschlagen;

Es scheint jetzt richtig zu funktionieren; Vielleicht gab es einen seltsamen Ereignisauslöser, der das Inkrement zweimal rief;