如何在jQuery中实现第一次和第二次单击同一按钮时的两个不同动作
如何在jQuery中实现第一次和第二次单击同一按钮时的两个不同动作
提问于 2020-06-08 03:00:04
我正在尝试使用jQuery构建一个测验。它一次显示一个问题。在第一次点击“下一步按钮”时，我想突出显示正确和错误的答案，然后再次点击下一步按钮，第二次应该会把我带到下一张幻灯片。
但我无法识别，第一次和第二次点击下一张幻灯片中的按钮。看起来这两个动作都是一个接一个地立即发生，所以第一个动作，用户看不到。
下面是我的代码。showNextSlide()是我尝试实现上述场景的地方
<body class="quiz">
<h1>Quiz on Important Facts</h1>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Previous Question</button>
<button id="next">Next Question</button>
<button id="submit">Submit Quiz</button>
<div id="results"></div>
</body>脚本-
$(document).ready(function(){
var quizContainer = $('#quiz');
var resultsContainer = $('#results');
var submitButton = $('#submit');
var output = [];
var mq ='';
const previousButton = $("#previous");
// const checkAnsweButton = $("#check");
const nextButton = $("#next");
var total = '';
var currentSlide = 0;
function buildQuiz(){
$.ajax({
url: './json/qa.json',
success: function(data){
//console.log(data.myQuestions);
mq = data.myQuestions;
mq.forEach(
(currentQuestion, questionNumber) => {
const answers = [];
for(letter in currentQuestion.answers){
answers.push(
`<label>
<input type="radio" name="question${questionNumber}" value="${letter}">
${letter} :
${currentQuestion.answers[letter]}
</label>`
);
}
output.push(
`<div class="slide">
<div class="question"> ${currentQuestion.question} </div>
<div class="answers"> ${answers.join("")} </div>
</div>
`
);
quizContainer.html(output.join(''));
const slides = $('#quiz').find(".slide");
total = slides.length;
showSlide(currentSlide);
});
}
})
}
buildQuiz();
function showResults() {
// gather answer containers from our quiz
const answerContainers = quizContainer.find('.answers');
// keep track of user's answers
let numCorrect = 0;
// for each question...
mq.forEach((currentQuestion, questionNumber) => {
// find selected answer
const answerContainer = answerContainers.eq(questionNumber);
const selector = $('input[type=radio]:checked');
const userAnswer = (answerContainer.find(selector) || {}).val();
//console.log($('input[type=radio]:checked').val())
// if answer is correct
if (userAnswer === currentQuestion.correctAnswer) {
// add to the number of correct answers
numCorrect++;
}
});
$(resultsContainer).html(`${numCorrect} out of ${mq.length}`);
}
function showSlide(n) {
console.log(mq);
$('#quiz').find('.slide').eq(0).removeClass('active-slide');
$('#quiz').find('.slide').eq(n).addClass('active-slide');
$('#quiz').find('.slide').eq(n-1).removeClass('active-slide');
$('#quiz').find('.slide').eq(n+1).removeClass('active-slide');
currentSlide = n;
if (currentSlide === 0) {
previousButton.hide();
} else {
previousButton.show();
}
if (currentSlide === total - 1) {
nextButton.hide();
submitButton.show();
} else {
nextButton.show();
submitButton.hide();
}
}
function showNextSlide() {
var clickcount = 0;
const answerContainers = quizContainer.find('.answers');
mq.forEach((currentQuestion, questionNumber) => {
// find selected answer
const answerContainer = answerContainers.eq(questionNumber);
const selector = $('input[type=radio]:checked');
const userAnswer = (answerContainer.find(selector) || {}).val();
// if answer is correct
if (userAnswer === currentQuestion.correctAnswer) {
console.log("if")
// color the answers green
answerContainers.find('input').eq(questionNumber).parent().css("color","lightgreen");
}
// if answer is wrong or blank
else {
// color the answers red
answerContainers.find('input').eq(questionNumber).parent().css("color","red");
}
});
showSlide(currentSlide + 1);
}
function showPreviousSlide() {
showSlide(currentSlide - 1);
}
submitButton.on('click', showResults);
previousButton.on("click", showPreviousSlide);
//checkAnsweButton.on('click', showResults);
nextButton.bind("click", showNextSlide);
})JSON -
{
"myQuestions" : [
{
"question": "Who invented JavaScript?",
"answers": {
"a": "Douglas Crockford",
"b": "Sheryl Sandberg",
"c": "Brendan Eich"
},
"correctAnswer": "c"
},
{
"question": "Which one of these is a JavaScript package manager?",
"answers": {
"a": "Node.js",
"b": "TypeScript",
"c": "npm"
},
"correctAnswer": "c"
},
{
"question": "Which tool can you use to ensure code quality?",
"answers": {
"a": "Angular",
"b": "jQuery",
"c": "RequireJS",
"d": "ESLint"
},
"correctAnswer": "d"
}
]
}JS fiddle - https://jsfiddle.net/01bxu9fv/
Stack Overflow用户
回答已采纳
发布于 2020-06-08 03:28:53
您可以执行以下操作:在showNextSlide()函数外部声明变量clickcount，并在函数内部检查其值，以便在第一次单击时显示正确和错误的答案，并在第二次单击时显示下一张幻灯片。如果clickcount的值为2，则将其重置为0。
var clickcount = 0;
function showNextSlide() {
if(clickcount == 2){
clickcount = 0;
}
if(clickcount == 0) {
const answerContainers = quizContainer.find('.answers');
mq.forEach((currentQuestion, questionNumber) => {
// find selected answer
const answerContainer = answerContainers.eq(questionNumber);
const selector = $('input[type=radio]:checked');
const userAnswer = (answerContainer.find(selector) || {}).val();
// if answer is correct
if (userAnswer === currentQuestion.correctAnswer) {
console.log("if")
// color the answers green
answerContainers.find('input').eq(questionNumber).parent().css("color","lightgreen");
}
// if answer is wrong or blank
else {
// color the answers red
answerContainers.find('input').eq(questionNumber).parent().css("color","red");
}
});
}
else {
showSlide(currentSlide + 1);
}
clickcount += 1;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62250230
复制相关文章
相似问题
腾讯云开发者
