javascript - Jquery click 方法仅在我的测验中有效一次

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建议的；

现在似乎工作正常；可能发生了一些奇怪的事件触发器，调用了两次增量；