为什么点击按钮时我会收到额外的回复

随着每个问题的加载，它会向answerChoice s添加更多的点击处理程序。因此，当用户在第二个问题上点击单选按钮时，会有2个处理程序被触发，第三个问题上会有3个处理程序，依此类推

您需要唯一标识每个问题的单选按钮，或者替换处理程序。第二种选择在这一点上对你来说更快，但我鼓励你尝试重构你的设计，以避免每个问题都需要唯一的函数。无论如何，要删除以前的点击处理程序，请使用jQuery .off()方法：

$('#answerChoice0').off('click').on('click',function(){
                    ^^^^^^^^^^^^

例如：

function question1(){
    $('#answerChoice0').off('click').on('click',function(){
        alert('correct!');
        $("input[type=radio]").attr('disabled', true);
    })
    $('#answerChoice1').off('click').on('click',function(){
        alert('wrong');
        $("input[type=radio]").attr('disabled', true);
    })
    $('#answerChoice2').off('click').on('click',function(){
        alert('wrong');
        $("input[type=radio]").attr('disabled', true);
    })
    $('#answerChoice3').off('click').on('click',function(){
        alert('wrong');
        $("input[type=radio]").attr('disabled', true);
    })
}

您可以用下面的代码片段或这个JSFiddle来尝试一下。

$(document).ready(function(){
/*
    When the page loads, I only want the welcome page to show. I want
    everything else to be hidden. Also want answer choices to remain hidden.
*/
$('form').hide()
var gameBegin = [
{/*Instructions Page*/
    question: 'Welcome to the Game Instructions Page!',
    instructions:'  You will be presented with several questions. Below each question are a set of answers. Select the answer that you think is correct and then click the "Submit" button to see if your answer is correct. At the end of the game, you will see your final score to let you know how you did.Choose carefully! Once you move onto the next question, you cannot go back!',
    choice: '',
    correctAnswer: '',
    buttonValue: 'Start Game!'
},
{/*question One*/
    question: 'What Film Series is Freddy Krueger From?',
    instructions: 'Question 1 out of 5',
    choice: ['A Nightmare on Elm Street', 'Simpsons Treehouse of Horror', '28 Days Later', 'The Texas Chainsaw Massacre'],
    correctAnswer: 0,
    buttonValue: 'Submit Answer'
},
{/*Question Two*/
    question: 'Which Terrifying Villian Uses a Chainsaw to Murder His Victims?',
    instructions: 'Question 2 out of 5',
    choice: ['Jason Voorhees', 'Dracula', 'Frankenstein', 'Leatherface'],
    correctAnswer: 3,
    buttonValue: 'Submit Answer'
},
{/*Question Three*/
    question: 'What is the Occupation of Sweeney Todd?',
    instructions: 'Question 3 out of 5',
    choice: ['Teacher', 'Priest', 'Barber', 'Doctor'],
    correctAnswer: 2,
    buttonValue: 'Submit Answer'
},
{/*Question Four*/
    question: 'Who are the villians in the 1993 film "Hocus Pocus?"',
    instructions: 'Question 4 out of 5',
    choice: ['The Sanderson Sisters', 'Vlad the Impaler', 'Jigsaw', 'The Blair Witch'],
    correctAnswer: 0,
    buttonValue: 'Submit Answer'
},
{/*Question Five*/
    question: 'Which Serial Killer is Leatherface Based On?',
    instructions: 'Question 5 out of 5',
    choice: ['Ted Bundy', 'Ed Gein', 'Charles Manson', 'Jack the Ripper'],
    correctAnswer: 1,
    buttonValue: 'Submit Answer'
},
{/*Game Finished Screen*/
    question: 'Congratulations! You Finished The Halloween Quiz Game!',
    instructions: 'To play again, click the button below.',
    choice: '',
    correctAnswer: '',
    buttonValue: 'Start New Game'
}
]
/*global variables*/
var gameBeginValue = 0;
var zero = "answerswerChoice0";
var one = "answerswerChoice1";
var two = "answerswerChoice2";
var three = "answerswerChoice3";
/*Moving from Page to Page When Clicking Submit Button*/
$('#submitButton').on('click',function(){
    /*I want the gameBeginValue to reset back to 0 to start a new game
    There is no need to reshow the welcome page again. I also want
    the radio buttons to only appear if the user is looking at a 
    question. */
    if(gameBeginValue > 6){
        gameBeginValue = 0;
    } else if ((gameBeginValue < 1) || (gameBeginValue > 5)) {
        $('form').hide();
    }else{
        $('form').show();
    }
    /*Heading at top of Page*/
    var questionTitle = $('h2');
    questionTitle[0].textContent = gameBegin[gameBeginValue].question;
    /*The information section for playing the game*/
    var gameInformation = $('p');
    gameInformation[0].textContent = gameBegin[gameBeginValue].instructions;
    /*Changing the values of the input choices based on question.*/
    var questionChoice =$('span');
    questionChoice[0].textContent = gameBegin[gameBeginValue].choice[0];
    questionChoice[1].textContent = gameBegin[gameBeginValue].choice[1];
    questionChoice[2].textContent = gameBegin[gameBeginValue].choice[2];
    questionChoice[3].textContent = gameBegin[gameBeginValue].choice[3];
    /*Changing the value of the submit button based on what screen you are on */
    var buttonDescription = $("#submitButton");
    buttonDescription[0].value = gameBegin[gameBeginValue].buttonValue;
    /*-----------------------------------------*/
    if (gameBeginValue==1){
        question1();
    }else if (gameBeginValue==2){
        question2();
    }else{
    }
    /*I want the gameBeginValue variable to increase everytime this button is clicked
    But I want it to Happen Last.*/
    $("input[type=radio]").attr('disabled', false);
    gameBeginValue++;
    /*I want the radio buttons to all be unchecked at the start of the
    next question*/
    $('#answerChoice0').prop('checked',false);
    $('#answerChoice1').prop('checked',false);
    $('#answerChoice2').prop('checked',false);
    $('#answerChoice3').prop('checked',false);
    /*I want a message to appear to let you know if the answer you chose
    was correct or not*/
})
function question1(){
    $('#answerChoice0').off('click').on('click',function(){
        alert('correct!');
        $("input[type=radio]").attr('disabled', true);
    })
    $('#answerChoice1').off('click').on('click',function(){
        alert('wrong');
        $("input[type=radio]").attr('disabled', true);
    })
    $('#answerChoice2').off('click').on('click',function(){
        alert('wrong');
        $("input[type=radio]").attr('disabled', true);
    })
    $('#answerChoice3').off('click').on('click',function(){
        alert('wrong');
        $("input[type=radio]").attr('disabled', true);
    })
}
function question2(){
    $('#answerChoice0').off('click').on('click',function(){
        alert('wrong!');
        $("input[type=radio]").attr('disabled', true);
    })
    $('#answerChoice1').off('click').on('click',function(){
        alert('wrong');
        $("input[type=radio]").attr('disabled', true);
    })
    $('#answerChoice2').off('click').on('click',function(){
        alert('correct');
        $("input[type=radio]").attr('disabled', true);
    })
    $('#answerChoice3').off('click').on('click',function(){
        alert('wrong');
        $("input[type=radio]").attr('disabled', true);
    })
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
    <section class="headingIntroduction">
        <div class="headingTitle">
            <h2>Welcome to the Halloween Quiz Game!</h2>
            <hr/>
            <!--The paragraph tag directly below this
            is left blank because when the game starts, I want
            it to be blank. I only want it to have content on one 
            particular part of the program only.
            -->
            <p></p>
            <hr/>
        </div>
        <div class="formInput">
            <form>
                <input type="radio" id="answerswerChoice0" name="answerswerChoice" value="answerswerChoice0"/><span></span>
                <input type="radio" id="answerswerChoice1" name="answerswerChoice" value="answerswerChoice1"/><span></span>
                <input type="radio" id="answerswerChoice2" name="answerswerChoice" value="answerswerChoice2"/><span></span>
                <input type="radio" id="answerswerChoice3" name="answerswerChoice" value="answerswerChoice3"/><span></span>
                <hr/>
            </form>
        </div>
        <div class="submitButton">
            <input type="submit" id="submitButton" value="Click Here to Begin!"/>
            <br/>
        </div>
        <div class="userScore">
            <h3>Score:</h3>
        </div>
    </section>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="js/script.js"></script>