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>

- user6638423

---

我们需要查看你的HTML代码才能帮助你。猜测你可能需要使用委托事件处理程序。控制台中有任何错误吗？ - Rory McCrossan

请发布一个 [mcve]。 - j08691

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - user6638423

谢谢，我之前不知道！不过我仍然遇到了同样的问题。 - user6638423

不需要“答案”，只需将每组“答案”的name =“options”更改为name =“opt1”。然后在第二组“答案”中，将所有内容更改为name =“opt2”。顺便说一句，所有ID都必须是唯一的。您有一组4个id =“option1”等。您还有重复的id =“row ...。我认为您需要class =“row”。在JS / jQ的前两行中，您有getElementById（），但两个元素.answers和.questionarea是类而不是ID。 - zer00ne

Answer 1

我用你的代码创建了一个JSFiddle：https://jsfiddle.net/xr9d5rg1/（如果下次你能自己做，那就太好了:D）

有些奇怪的事情发生了，我在代码上更新了一些东西：

1- 将.size()更新为.length，因为它已经在最新的jQuery版本中更新了（如果您使用旧版本的jQuery，请忽略此项）

2- 将点击引用从$('.answers')更新为$('.answers input')，这样它就不会接受单选框外的点击；

3- 更新了问题的引用，就像用户1252748建议的那样；

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

- Pedro Moreira

---

不用客气。如果答案解决了问题，请将其标记为“正确”答案 :) - Pedro Moreira

我不知道如何将其标记为正确答案，我勾选了它，现在勾号变成绿色了，所以我想那就是了吧？还是我需要做些其他的事情？抱歉，我是这个网站的新手哈哈。现在我又遇到了测验的问题（是啊...），所以我要问一个新问题！ - user6638423

是的，现在它被标记为正确答案了：），谢谢。通过标记为正确答案并点赞，您正在为回答问题的人提供信用（积分）；这对于鼓励人们回答问题非常重要：D - Pedro Moreira