Question

每次尝试正确答案时，我都试图获得一个当前分数，结果是我在分页中设置了问题，当该答案正确时，它给了我分数，但是当它给出时转到下一页，它将刷新分数，如果我正确设置了分数，只需再次给我该分数的分数，但它不会累加。

JS代码：

$(function() {
  $('#author').on('change', function(event) {
    var opt = this.options[ this.selectedIndex ];
    var correct = $(opt).text().match (arr2);
    var score = 0;   
    if (correct){
      alert('Good job ' + arr2,);
      score += 2;
      alert (score);
      currentScore = score++;
      alert(currentScore);
      display(currentScore);
   } 
   else {
     alert ('nice try ' + arr2);
   }
  });
});

Answer 1

这是另一种选择-本地存储。

这里是参考文献W3School Web storage

这不是最理想的解决方案，但可以满足您的条件。

let score = localStorage.getItem('score')
score++;
localStorage.setItem('score', score);

您的页面将可以访问localStorage，因此您可以获取score的值并重新设置它。

希望参考文献可以回答其他问题，否则请发表评论！

缺点：并非所有浏览器都支持。

编辑：这是您的代码示例。

$(function() {
  let currentScore = localStorage.getItem('score'); // get score
  if (currentScore === null){   // if score doesnt exist yet
    localStorage.setItem('score', 0);  // set score
    currentScore = 0;       // make currentScore 0
  }

  $('#author').on('change', function(event) {
    var opt = this.options[ this.selectedIndex ];
    var correct = $(opt).text().match (arr2);         
    if (correct){
      alert('Good job ' + arr2);
      currentScore += 2;    //increment current score by 2
      alert (currentScore);
      localStorage.setItem('score', currentScore);     // set the item again with new value
      alert(currentScore);
      display(currentScore);
   } 
   else {
     alert ('nice try ' + arr2);
   }
  });
});

编辑2：

let currentScore = localStorage.getItem('score'); // get score
currentScore = parseInt(currentScore);

Answer 2

它给了我分数，但是当它转到下一页时，它刷新了分数，如果我正确了，就给我该分数的分数，但它不会累加。

我认为您的问题在那里。

如果我理解正确，那么当答案是正确的时候，页面将刷新并转到下一个问题。您的问题是分数不等于上一个分数。

score变量仅存储在当前页面中，就像一个临时页面一样。如果不通过ajax或其他方法将分数保存在服务器上，并将其显示在下一页上，则该分数不会累加。实际上，由于刷新，score的值为0。

一个简单的模式：

得分= 0->正确答案-> +50分->得分= 50->下一页->得分= 0

如您所见，由于您编写的JavaScript不能确保信息的持久性，因此先前存储的分数将丢失。

您需要在服务器上发送分数，然后在加载新页面时将其取回，或者避免更改页面并使测验仅显示在一个页面上而无需刷新。

请记住，每次您刷新页面时，javascript都会重新启动，因此之前所做的所有操作都会丢失。

我希望这会有所帮助。

Ps：您应该像这样将代码放在$( document ).ready();块中：

$( document ).ready(function() {
    console.log( "ready!" );
});

这将使您的代码在加载html DOM（html文件的结构）并准备进行操作时开始。它可以避免很多错误。 Edit2：代码中的外观：

$( document ).ready(function() {

   $('#author').on('change', function(event) {
      var opt = this.options[ this.selectedIndex ];
      var correct = $(opt).text().match (arr2);
      var score = 0;   
      if (correct){
        alert('Good job ' + arr2,);
        score += 2;
        alert (score);
        currentScore = score++;
        alert(currentScore);
        display(currentScore);
      } 
      else {
        alert ('nice try ' + arr2);
      }
   });

});

或者，为了使它更具可读性并避免在document.ready块中包含很多内容（当您将有很多行/函数时）：

$( document ).ready( myNiceFunction() );

var myNiceFunction = function(){
    $('#author').on('change', function(event) {
    var opt = this.options[ this.selectedIndex ];
    var correct = $(opt).text().match (arr2);
    var score = 0;   
    if (correct){
       alert('Good job ' + arr2,);
       score += 2;
       alert (score);
       currentScore = score++;
       alert(currentScore);
       display(currentScore);
    } 
    else {
       alert ('nice try ' + arr2);
    }
}

Ps2：我知道这不是解释它的最佳网站，但我认为它很简单，可以让您了解ajax的原理，而不会迷失于一系列技术性的内容：here和{{3 }}

编辑：语法和第二个后记。

Answer 3

不确定分页的方式，但应该将其分页，而不是完整的回发，这样您就不会丢失页面上的值。

如何加总当前分数，jquery，javascript

3 个答案: