javascript - 如何在调用按键后显示新问题，同时隐藏以前的问题

Question

我正在创建一个具有不同算术功能的数学游戏。鉴于我是 JQuery 新手，我无法仅显示当前问题并隐藏用户之前回答的所有问题。

我已经分离了功能以提高内容的模块化性，但我仍然无法显示和隐藏内容。

var firstOperation = "ADD";
var upRange = 10;
var questiNum = 10;

var max = parseInt(upRange);
var min = 0;
var questRight = 0;
var quantQuest = 0;

$(function() {
  var operators = setOperator(firstOperation);
   var num1 = getRandomInt(min, max);
   var num2 = getRandomInt(min, max);
   displayQuestion(num1, num2, operators);
   checkQuest(num1, num2, operators);
  }

});

function setOperator(firstOperation) {
  if (firstOperation === "ADD") {
    console.log("setOperation: ADD");
    return '+';
  } else if (firstOperation === "SUBTRACT") {
    console.log("setOperation: SUBTRACT");
    return '-';
  } else if (firstOperation === "MULTIPLY") {
    console.log("setOperation: MULTIPLY");
    return '*';
  } else if (firstOperation === "DIVIDE") {
    console.log("setOperation: DIVIDE");
    return '/';
  } else {
    return alert("Operator did not work!!");
  }
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function displayQuestion(num1, num2, operators) {
  $('#question').html(num1 + ' ' + operators + ' ' + num2 + ' = ');
}

function checkQuest(num1, num2, operators) {
  $('#question-answer').keyup(function(e) {
    if (e.which == 13) {
      $('#question-answer').attr('disabled', true);
      $(this).attr('disabled', true);
      $(this).after(function() {
        if (eval(num1 + operators + num2) == $('#question-answer').val()) {
          questRight++;
          console.log("RIGHT!!!" + questRight);
        }

      });
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="question-section">
  <div id="questionbox">
    <p id="question">&nbsp;</p>
    <div id="answerbox">
      <div class="input-group">
        <input id="question-answer" type="text">
      </div>
    </div>
  </div>
</div>

Answer 1

已编辑 - 发表评论后。

问题是您没有调用该函数来“重新加载”问题。

每次按键后，此更改后的代码片段将调用“loadNextQuestion”方法。

我将随机数移至全局使用，因此您可以使用相同的事件。

也不需要禁用。

var firstOperation = "ADD";
var upRange = 10;
var questiNum = 10;

var max = parseInt(upRange);
var min = 0;
var questRight = 0;
var quantQuest = 0;

//make them global
var num1;
var num2;
var operators;

$(function() {
  loadNextQuestion();
  addCheckQuestEvent(operators, quantQuest);
});

function loadNextQuestion() {
  operators = setOperator(firstOperation);
  num1 = getRandomInt(min, max);
  num2 = getRandomInt(min, max);
  displayQuestion(quantQuest);
}

function setOperator(firstOperation) {
  if (firstOperation === "ADD") {
    console.log("setOperation: ADD");
    return '+';
  } else if (firstOperation === "SUBTRACT") {
    console.log("setOperation: SUBTRACT");
    return '-';
  } else if (firstOperation === "MULTIPLY") {
    console.log("setOperation: MULTIPLY");
    return '*';
  } else if (firstOperation === "DIVIDE") {
    console.log("setOperation: DIVIDE");
    return '/';
  } else {
    return alert("Operator did not work!!");
  }
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function displayQuestion() {
  var containerQuestion = $('#question');
  containerQuestion.text(`${num1} ${operators} ${num2} =`);
}

function addCheckQuestEvent() {
  $(`#question-answer`).keyup(function(e) {
    if (e.which == 13) {
      $(this).after(function() {
        if (eval(num1 + operators + num2) == $(`#question-answer`).val()) {
          questRight++;
          console.log("RIGHT!!!" + questRight);
        }
        quantQuest++;
        if (quantQuest<10) {
          loadNextQuestion();
        }
        else {
          alert(`bye bye, you answered: ${questRight} `);
        }
      });
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="question-section">
  <div id="questionbox">
  <p id="question"></p>
    <div id="answerbox">
      <div class="input-group">
        <input id="question-answer" type="text">
      </div>
    </div>
  </div>
</div>