Javascript Jquery单击方法在我的测验中只起作用一次

我正在做一个简单的测验（以每次一个问题的方式），这是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:

开始测验

Q1：您和您的BFF是如何见面的



工作中


同居


在特殊情况下


在校

问题2：你如何描述你的友谊




穷困潦倒的


太神了


深沉的


家庭

问题3：你们一起做什么




生意


外出交际


就抱着对方吧


互相恶作剧

问题4：你多久打一次架




不多，但当我们这样做的时候，这是一件大事


我们有很多无害的争吵


有时


互相恶作剧

我用您的代码创建了一个JSFIDLE：（如果您下次可以自己做，将非常有帮助：D）

发生了一些奇怪的事情，我更新了一些代码：

1-将

.size（）

更新为

.length

，因为它是在上一个jQuery版本中更新的（如果您使用的是较旧的jQuery版本，请忽略它）

2-更新了点击参考，从

$（'.answers'）

到

$（'.answers input'）

，因此它不接受收音机外的点击

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

---

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

我们需要查看您的HTML以帮助您。您可能需要使用委托事件处理程序。您在控制台中有任何错误吗？请发布一条消息，您必须在currentQuestion Incrementation中有一些错误谢谢您的回答！抱歉，我认为这是一个JS问题，所以我只包含了它，但我现在也要在我的原始帖子中发布我的html！控制台中没有错误。对于每组“答案”，将

name=“options”

更改为

name=“options*”

，然后将

name=“options”

全部更改为

name=“opt1”

。然后在第二组“答案”中，将所有答案更改为

name=“opt2”

。顺便说一句，所有ID必须是唯一的。您有一个由4人组成的小组

id=“option1”

等。您还有重复的

id=“row…

。我认为您需要

class=“row”

。在JS/jQ的前两行中，您有

getElementById（）

但是这两个元素

答案
和
问题区域
不是ID。不客气。如果答案解决了问题，请将其标记为
正确答案：）我不知道如何将其标记为正确答案，我勾选了它，现在勾选绿色，我想是这样吗？或者我应该做些什么还有吗？对不起，我是这个网站的新手哈哈。我现在对这个测验有另一个问题（是的…），所以我要问一个新问题！是的，它现在被标记为正确答案：），谢谢。通过标记为正确答案并投票，你给了回答者分数；这对于鼓励人们回答问题很重要：D
<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>