如何使用JavaScript/jQuery解决游戏逻辑中的错误

Question

本网站将您带到我的游戏中，当您单击几个DIVS时，它将显示错误。

我正在做一个危险的游戏。当用户单击一个子类别之一时，问题会成功弹出。用户还能够成功或失败地回答该问题；但是，在他们回答问题后，逻辑似乎正在拾取过去的点击，从而导致事件处理程序执行新单击的目标和过去点击目标的功能。请参见上面的链接，例如错误。

请帮助我调试！

 let showQuestion = function(id){
        $('body > #simpleModal').css('display', 'block')
        $('.modal-body > .question').text(answerQuestion[id].answer)
    }
    let clickCounter = 0
    $('.container > .questionBox').on('click', this,  function() {
        clickCounter += 1
        let id = this.id
        showQuestion(id)
        let questionAnswered = this
        $('.modal-content > button').on('click', this, function(){
            $('body > #simpleModal').css('display', 'none')
            if ($('.modal-content > input').val() === answerQuestion[id].question){
                goodJob()
                $(questionAnswered).css('background-color', 'green') 
                $(questionAnswered).off()
            } else {
                tryAgain()
                $(questionAnswered).css('background-color', 'red') 
                $(questionAnswered).off()
            }

我过去2周一直参加网络开发课程，所以我仍在学习。我的网站是一个正在进行的工作。

Answer 1

看起来您在单击"侦听器"中有单击"侦听器"。有这样做的理由吗？我想知道第一个$('.container > .questionBox')是否也在模态内拾取单击。但是我不能不看更多您的代码，这是否就是为什么点击似乎正在堆叠的原因。