JavaScript变量在第二次单击事件时间后取消设置

JavaScript variable unset after the second click event time

本文关键字：时间 取消 设置 事件 单击 变量 第二次 JavaScript      更新时间：2023-12-15

我有一段代码，它提出了一个问题

askQuestion（）
它在页面加载时运行，并在单击id为
wb_option_button
的按钮时再次运行。但我注意到，在第一次点击时，它运行良好，但第二次点击从未运行过。我想知道（万一）它出了什么问题，以及如何让它发挥作用。 
var q_selected;
var q_number = 1;
var questionDiv = $('.wb_questions');
var optionDiv = $('div#wb_options');
function askQuestion()
{
    questionDiv.html(questions[q_number]['question']);
    optionDiv.html('<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][0]+'</button>'+
    '<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][1]+'</button>'+
    '<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][2]+'</button>'+
    '<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][3]+'</button>'
); 
}
function checkAnswer(q_answer)
{
    if(q_selected === q_answer)
    {
        return true;
    }
}
function isCheckpoint()
{
    if(checkpoints[q_number]!=null)
    {
        return true;
    }
    else
    {
        return false;
    }
}
askQuestion();
$('button.wb_option_button').click(function(){
    q_selected = $(this).text();
    if(checkAnswer(questions[q_number]['answer'])===true)
    {
        if(isCheckpoint()===true)
        {
            showRank(q_number);          
        }
        else
        {
            q_number+=1;
            //alert(q_number);
            askQuestion();
            // showStage();
        return q_number;
        }        
    }
    else
    {
        alert("You failed");
    }
});

var问题是一个对象，var检查点也是一个对象。

所有的按钮都有相同的ID。当你通过ID获取元素时，它只会返回它用这个ID找到的第一个元素。如果你想获取多个元素，你必须用另一个选择器来获取它们，即通过className或任何其他方式，然后通过ID。

编辑：您实际上是在按className选择按钮。问题是，当您再次调用askQuestion()时，点击侦听器不会添加到新按钮中，因此您可能希望将点击事件分配移动到askQuestion 中

希望这能有所帮助。

经过进一步的挖掘，我得到了这个完美的解决方案。

感谢大家的帮助
$('.wb_options').on('click','.wb_option_button',function(){
    q_selected = $(this).text();
    if(checkAnswer(questions[q_number]['answer'])===true)
    {
        if(isCheckpoint()===true)
        {
            showRank(q_number);          
        }
        else
        {
            q_number+=1;
            askQuestion();
            alert(q_number);
           // showStage();
           //return q_number;
        }        
    }
    else
    {
        alert("You failed");
    }
});
相关文章：