我使用 .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("click") 是关键点，帮我限制一只小鸡但有其他问题。

我希望按钮恢复点击功能有效。所以使用 .on( ) 恢复点击但不起作用。

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

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

因为当第二次单击 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>