JavaScript NaN 变量

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 事件中再次声明成功，使类型从整数变为 bool 值，这会导致 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>