javascript NaN变量

Question

我正在进行某种测验并计算出良好的效果，但在最后一项测验中，我的变量得到了NaN而且我不知道为什么。任何人都有线索？

每个提醒都很好：1,2,3,4但.gotoresult它始终在警报中提供NaN，所以它始终会转到.lost。

＆＃13;

＆＃13;

$(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();
    }
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您在$（＆＃39; .gotoresult＆＃39;）onclick事件中再次声明成功，使得类型从整数变为布尔值，从而导致NAN错误。

＆＃13;

＆＃13;

$(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();
    }
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

秘诀不是使用计数的CSS类。

当 所有项目（如所有问题）也具有相同的CSS类时，看看代码有多短。

＆＃13;

＆＃13;

$(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();
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;