我正在建立一个小的“测验”游戏(仅仅是为了学习).我想要做的“大局”是确定最终用户是否根据“gameBegin”数组的索引值选择了正确的答案.
它正在给我答案“正确”,在第一个问题上选择正确的单选按钮,然后在下一个问题上,当我选择相同的单选按钮时,它会说“正确”和“错误”.关于第三个问题,如果我选择相同的单选按钮,它会说“正确”,“错误”和“错误”等.
编辑：这实际上是一个回复,但我不喜欢我的评论格式化的方式(我认为阅读这个帖子的人更难阅读),所以我只是编辑了我的帖子.
“As each question loads, it’s adding more click handlers to the
answerChoices”
你知道为什么每个问题加载时会在“answerChoices”中添加更多点击处理程序吗？在我看来,它会检查“gameBeginValue”是否等于某个值,如果是,则运行一个函数,然后继续检查并查看它是否等于另一个值并运行该函数(如果没有).
这是我的代码：
HTML：
<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="answerChoice0" name="answerChoice" value="answerChoice0"/><span></span>
<input type="radio" id="answerChoice1" name="answerChoice" value="answerChoice1"/><span></span>
<input type="radio" id="answerChoice2" name="answerChoice" value="answerChoice2"/><span></span>
<input type="radio" id="answerChoice3" name="answerChoice" value="answerChoice3"/><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>
jQuery的：
$(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 = "answerChoice0";
var one = "answerChoice1";
var two = "answerChoice2";
var three = "answerChoice3";
/*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').on('click',function(){
alert('correct!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice1').on('click',function(){
alert('wrong');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice2').on('click',function(){
alert('wrong');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice3').on('click',function(){
alert('wrong');
$("input[type=radio]").attr('disabled', true);
})
}
function question2(){
$('#answerChoice0').on('click',function(){
alert('wrong!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice1').on('click',function(){
alert('wrong');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice2').on('click',function(){
alert('correct');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice3').on('click',function(){
alert('wrong');
$("input[type=radio]").attr('disabled', true);
})
}
})
最佳答案 随着每个问题的加载,它会为answerChoices添加更多点击处理程序.因此,当用户单击第二个问题上的单选按钮时,有2个处理程序被触发,第三个有3个,依此类推.
您需要唯一标识每个问题的单选按钮,或者替换处理程序.第二种选择在这一点上更快,但我鼓励尝试重构您的设计,以避免每个问题都需要独特的功能.无论如何 – 要删除以前的点击处理程序,请使用jQuery .off() method：
$('#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);
})
}
您可以使用下面的代码段或this 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 = "answerChoice0";
var one = "answerChoice1";
var two = "answerChoice2";
var three = "answerChoice3";
/*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="answerChoice0" name="answerChoice" value="answerChoice0"/><span></span>
<input type="radio" id="answerChoice1" name="answerChoice" value="answerChoice1"/><span></span>
<input type="radio" id="answerChoice2" name="answerChoice" value="answerChoice2"/><span></span>
<input type="radio" id="answerChoice3" name="answerChoice" value="answerChoice3"/><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>