我使用.off()限制一次点击.但当下一页按钮不起作用时

Question

$(function() {
$(".questionPage").hide()
let changeText = function(index) {
$(".question").html(testMath[index].question);
$("#option1").text(testMath[index].option[[0]]);
$("#option2").text(testMath[index].option[[1]]);
}
let testMath = [{
question: "1+2=?",
option: ["3", "6"],
answer: "3"
},
{
question: "2+7=?",
option: ["9", "13"],
answer: "9"
},
];
let count = 0
$("#start").click(function() {
$(".questionPage").show();
changeText(0);
});
$("#options button").click(function() {
checkAnswer($(this))
})
let checkAnswer = function(option) {
if (option.text() === testMath[count].answer) {
console.log("answer = " + $(option).text())
count++;
console.log("count =" + count)
$(option).text("correct").off("click");
// .off("click") is keypoint,help me limit one chick
// but have other problem.
setTimeout(next, 5000);
function next() {
$(".questionPage").hide()
changeText(1)
$("#options button").on("click")
// i hope button recovery click function work.
// so use .on( ) recovery click but not work .                       
$(".questionPage").show()
}
} else {
$(option).text("wrong")
}
}

})

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<button id="start">start</button>
<div class="questionPage">
<h1>Question</h1>
<br>
<p class="question">1 + 2 = ?</p>
<div id="options">
<button id="option1">3</button>
<button id="option2">6</button>
</div>
</div>

.off("点击"(是关键，帮我限制一只小鸡，但有其他问题。

我希望按钮恢复点击功能工作。所以使用。on((恢复点击但不工作。

当按下第二页的正确按钮时，console.log不显示答案并计数。

我使用.off("点击"(限制一次点击

因为当第二次点击时，bool变为false。(因为一次性工作和设置文本更改(。

Answer 1

请参阅代码中的注释。。。

$(function() {
// our test object
let testMath = {
1: {
question: "1 + 2 = ?",
options: [3, 6],
answer: 3
},
2: {
question: "2 + 7 = ?",
options: [9, 13],
answer: 9
},
3: {
question: "10 + 4 = ?",
options: [9, 13, 14, 5, 15],
answer: 13
}
};
// constant question page
const questionPage = $('#questionPage');
// render question function
let renderQuestion = function(question) {
// if question id exists in testMath object
if (testMath[question]) {
// render the question
$('.question', questionPage).html(testMath[question].question);
// remove old options
$('.options',questionPage).empty();
// for each question answer options
testMath[question].options.forEach(function(answer) {
// append answer option button to options
$('.options',questionPage).append('<button data-question="' + question + '" data-answer="' + answer + '">' + answer + '</button>');
});
} else {
// empty question page or what ever
$(questionPage).empty();

// test complete alert
alert('Test Complete!');
}
}
// each options button in question page click event
$(questionPage).on('click', '.options BUTTON', function() {
// get this button data values
let question = $(this).data('question');
let answer = $(this).data('answer');
// check answer
checkAnswer(this, question, answer);
});
// check answer function
let checkAnswer = function(elem, question, answer) {
// if answer is correct
if (answer === testMath[question].answer) {
// render this button text correct and switch off event 
$(elem).text('correct').off('click');
// 2 sec delay
setTimeout(function() {
// render next question
nextQuestion(question);
}, 2000);
// else answer is wrong
} else {
// render this button text wrong
$(elem).text("wrong");
// 1 sec delay
setTimeout(function() {
// render wrong answer value back this button
$(elem).text(answer);
}, 1000);
}
}
// next question function
let nextQuestion = function(question) {
// render next question
renderQuestion(question + 1);
}
// document on click method to check for all matching targets
$(document).on('click', '#start', function() {
// show the question page
$(questionPage).show();
// render question id 1
renderQuestion(1);
// remove start button
$(this).remove();
});
});

<button id="start">start</button>
<div id="questionPage" style="display: none;">
<h1>Question</h1>
<br>
<p class="question"></p>
<div class="options"></div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>