javascript NaN variable

Question

我正在做某种测验并计算出良好的结果，但是在最后一个，我的变量获得了 NaN，我不知道为什么。任何人都有线索吗？

每个警报都很好地计算：1、2、3、4，但是在.gotoresult上，它总是在警报中给出NaN，因此始终转到.lost。

$(document).ready(function() {
  var success = 0;
  $('.gotostep1').on('click', function() {
    success = 0;
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().hide();
    $('.step1').show();
  });
  $('.gotostep2').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step2').show();
  });
  $('.gotostep3').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step3').show();
  });
  $('.gotostep4').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step4').show();
  });
  $('.gotostep5').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step5').show();
  });
  $('.gotoresult').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    if (success == 5) {
      $('.won').show();
    } else {
      var success = true;
      $('.lost').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step intro">
  <button class="gotostep1">Start de quiz</button>
</div>
<div class="step step1" style="display:none;">
  <h3 class="contentTitle">Vraag 1</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep2" correct="false" src="/static/media/vraag1a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep2" correct="true" src="/static/media/vraag1b.jpg" />
    </div>
  </div>
</div>
<div class="step step2" style="display:none;">
  <h3 class="contentTitle">Vraag 2</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep3" correct="true" src="/static/media/vraag2a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep3" correct="false" src="/static/media/vraag2b.jpg" />
    </div>
  </div>
</div>
<div class="step step3" style="display:none;">
  <h3 class="contentTitle">Vraag 3</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep4" correct="false" src="/static/media/vraag3a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep4" correct="true" src="/static/media/vraag3b.jpg" />
    </div>
  </div>
</div>
<div class="step step4" style="display:none;">
  <h3 class="contentTitle">Vraag 4</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep5" correct="true" src="/static/media/vraag4a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep5" correct="false" src="/static/media/vraag4b.jpg" />
    </div>
  </div>
</div>
<div class="step step5" style="display:none;">
  <h3 class="contentTitle">Strikvraag</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotoresult" correct="true" src="/static/media/vraag5a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotoresult" correct="false" src="/static/media/vraag5b.jpg" />
    </div>
  </div>
</div>
<div class="step lost" style="display:none;">
  lost!
</div>
<div class="step won" style="display:none;">
  won!
</div>

Answer 1

您在$('。'gotoresult'(onClick事件中再次声明成功，使从整数到布尔值的类型，这会导致NAN错误。

$(document).ready(function() {
  var success = 0;
  $('.gotostep1').on('click', function() {
    success = 0;
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().hide();
    $('.step1').show();
  });
  $('.gotostep2').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step2').show();
  });
  $('.gotostep3').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step3').show();
  });
  $('.gotostep4').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step4').show();
  });
  $('.gotostep5').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step5').show();
  });
  $('.gotoresult').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    if (success == 5) {
      $('.won').show();
    } else {
      success = 0;
      $('.lost').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step intro">
  <button class="gotostep1">Start de quiz</button>
</div>
<div class="step step1" style="display:none;">
  <h3 class="contentTitle">Vraag 1</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep2" correct="false" src="/static/media/vraag1a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep2" correct="true" src="/static/media/vraag1b.jpg" />
    </div>
  </div>
</div>
<div class="step step2" style="display:none;">
  <h3 class="contentTitle">Vraag 2</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep3" correct="true" src="/static/media/vraag2a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep3" correct="false" src="/static/media/vraag2b.jpg" />
    </div>
  </div>
</div>
<div class="step step3" style="display:none;">
  <h3 class="contentTitle">Vraag 3</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep4" correct="false" src="/static/media/vraag3a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep4" correct="true" src="/static/media/vraag3b.jpg" />
    </div>
  </div>
</div>
<div class="step step4" style="display:none;">
  <h3 class="contentTitle">Vraag 4</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep5" correct="true" src="/static/media/vraag4a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep5" correct="false" src="/static/media/vraag4b.jpg" />
    </div>
  </div>
</div>
<div class="step step5" style="display:none;">
  <h3 class="contentTitle">Strikvraag</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotoresult" correct="true" src="/static/media/vraag5a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotoresult" correct="false" src="/static/media/vraag5b.jpg" />
    </div>
  </div>
</div>
<div class="step lost" style="display:none;">
  lost!
</div>
<div class="step won" style="display:none;">
  won!
</div>

Answer 2

秘密不使用计数的CSS类。

查看代码所有相同的项目(如所有问题(也具有相同的CSS类。

$(function() {
  var success = 0;
  // every answer reveals the next answer
  $('.answer').click(function () {
    if ($(this).data('correct')) success++;
    $(this).closest('.question').hide().next('.question').show();
  });
  // the last answer reveals the overall result
  $('.question:last() .answer').click(function () {
    var result = (success == $('.answer').length) ? '#won' : '#lost';
    $(result).show();
  });
});

.question, .result {
  display: none;
}
.question.intro {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question intro">
  <button class="answer">Start de quiz</button>
</div>
<div class="question">
  <h3 class="contentTitle">Vraag 1</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="answer" data-correct="false" src="/static/media/vraag1a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="answer" data-correct="true" src="/static/media/vraag1b.jpg" />
    </div>
  </div>
</div>
<div class="question">
  <h3 class="contentTitle">Vraag 2</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="answer" data-correct="true" src="/static/media/vraag2a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="answer" data-correct="false" src="/static/media/vraag2b.jpg" />
    </div>
  </div>
</div>
<div class="question">
  <h3 class="contentTitle">Vraag 3</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="answer" data-correct="false" src="/static/media/vraag3a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="answer" data-correct="true" src="/static/media/vraag3b.jpg" />
    </div>
  </div>
</div>
<div class="question">
  <h3 class="contentTitle">Vraag 4</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="answer" data-correct="true" src="/static/media/vraag4a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="answer" data-correct="false" src="/static/media/vraag4b.jpg" />
    </div>
  </div>
</div>
<div class="question">
  <h3 class="contentTitle">Strikvraag</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="answer" data-correct="true" src="/static/media/vraag5a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="answer" data-correct="false" src="/static/media/vraag5b.jpg" />
    </div>
  </div>
</div>
<div class="result" id="lost">lost!</div>
<div class="result" id="won">won!</div>