针对测验中的一组按钮，而不是点击时的所有测验问题
Targeting group of buttons in quiz, rather than all quiz questions on click
更新#1
- 我已经更新了
index.html和scripts.js
剩余问题
如果我点击了错误的答案…
- 它不会给刚刚点击的按钮上课
- 它给出了
is-false类的正确答案和quiz__info
如果我点击正确答案…
- 它不会给
is-false类错误答案
scripts.js（新）
var score = 0;
$(document).on("click", ".quiz__response", function(){
$(this).siblings().addBack().addClass("is--unclickable");
$(this).siblings().show("quiz__info"); // Show extra info
console.log("Clicked");
if ($(this).hasClass("answerswer--true")) {
$(this).addClass("is--true");
$(this).find("i").show();
$(this).siblings().find("i").show();
// Update score
score++
$(".quiz__correct").html(score);
$(".quiz__correct--mobile").html(score);
} else {
// $(this).addClass("is--false");
$(this).siblings().addClass("is--false");
$(this).find("i").show();
$(this).siblings().find("i").show();
}
});
index.html（每个问题都有类似的结构）
<div class="quiz__question question-5 question__sports">
<h3>Question #5</h3>
<p class="quiz__description">A former PGA Tour winner from Brandon passed away at the age of 63. Can you name him?</p>
<div class="quiz__responses">
<button class="quiz__response response-5 answer--false">Billy Casper <i class="fa fa-times"></i></button>
<button class="quiz__response response-5 answer--false">Rory Woods <i class="fa fa-times"></i></button>
<button class="quiz__response response-5 answer--true">Dan Halldorson <i class="fa fa-check"></i></button>
<button class="quiz__response response-5 answer--false">Billy Hurley <i class="fa fa-times"></i></button>
<div class="quiz__info">
<p><span class="answerswer">A: </span>Halldorson competed for nearly 30 years on the PGA Tour, winning the 1980 Pensacola Open. He also captured the 1986 Deposit Guaranty Golf Classic, which was an unofficial tour stop. All told, he had 28 top 10 finishes in 431 PGA Tour events, pocketing nearly $1.2 million in career earnings.</p>
</div>
</div> <!-- .responses -->
</div> <!-- .question -->
原始问题
目标
我有一个测验，有25个问题，每个问题有4个可能的答案.quiz__response。当单击按钮时，我希望执行以下操作，但仅针对与特定问题相关的答案，现在它将以下操作应用于所有问题
单击按钮时
- 这四个答案的
addClass(".is--unclickable") - .show（）如果答案为真，则为
.fa-check；如果答案为假，则为.fa-times - 如果答案正确，
addClass(".is--true")将背景更改为绿色，addClass(".is--false")将其余三个答案的背景更改为红色
JSFiddle：https://jsfiddle.net/ub0c6acv/
scripts.js
$(function(){
/*-------------------------------------
QUIZ
--------------------------------------*/
function showScoreBox() {
var scrollDepth = $(window).scrollTop();
var divPosition = $(".quiz__header").offset().top - 45;
var windowWidth = $(window).width();
// console.log(windowWidth);
if (scrollDepth > divPosition && (windowWidth > 768)) {
$(".quiz__score").show();
$(".quiz__score--mobile").hide();
} else {
$(".quiz__score").hide();
$(".quiz__score--mobile").show();
}
} showScoreBox();
$(window).on("scroll", function(){
showScoreBox();
});
$(window).on("resize", function(){
showScoreBox();
});
var score = 0;
$(".quiz__response").on("click", function(){
$(".quiz__response").addClass("is--unclickable");
$(".quiz__info").show("quiz__info"); // Show extra info
console.log("Clicked");
if ($(this).hasClass("answerswer--true")) {
$(this).addClass("is--true");
$(".fa-check").show();
// Update score
score++
$(".quiz__correct").html(score);
$(".quiz__correct--mobile").html(score);
} else {
$(this).addClass("is--false");
$(".fa-times").show();
}
});
/*-------------------------------------
RESET
--------------------------------------*/
function resetQuiz() {
$(".quiz__response").removeClass("answerswer--true answer--false");
var score = 0
$(".quiz__correct").html(score);
$(".quiz__correct--mobile").html(score);
}
$(".button__reset").on("click", function(){
resetQuiz();
});
/*-------------------------------------
CONFETTI
--------------------------------------*/
function rainConfetti() {
if (score === 25) {
canvas.show()
}
}
/*-------------------------------------
SMOOTH SCROLL
--------------------------------------*/
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^'//,'') == this.pathname.replace(/^'//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
index.html（测验片段）
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="quiz">
<div class="quiz__score">
<p><span class="quiz__correct">0</span> / 25</p>
</div>
<h2 class="quiz__header" id="top">Take the quiz</h2>
<p class="credit">How well have you been paying attention to what's been happening in southwestern Manitoba in 2015? Take our 25-question quiz to test your local news knowledge.</p>
<div class="quiz__questions">
<!-- <canvas id="confetti"></canvas> -->
<!-- Question -->
<div class="quiz__question question-1 question__sports">
<div class="wrapper">
<!-- <img src="http://placehold.it/500x300" alt="" class="quiz__image"> -->
</div>
<h3>Question #1</h3>
<p class="quiz__description">What Brandon Wheat King, who was drafted by the New York Islanders, lost his desire to play hockey and walked away from the team prior to this season starting?</p>
<div class="quiz__responses">
<button class="quiz__response answer--false">Kale Clague <i class="fa fa-times"></i></button>
<button class="quiz__response answer--false">Macoy Erkamps <i class="fa fa-times"></i></button>
<button class="quiz__response answer--true">Ryan Pilon <i class="fa fa-check"></i></button>
<button class="quiz__response answer--false">Colin Cloutier <i class="fa fa-times"></i></button>
<!-- The six-foot-two, 212pound rearguard had 11 goals and 41 assists in 68 regular season games, with a goal and 11 assists in 19 playoff contests last season, paired mainly with Russian Ivan Provorov. In 193 regularseason games with Brandon and the Lethbridge,Hurricanes, Pilon has 23 goals, 93 assists and 116 penalty minutes. -->
</div> <!-- .responses -->
</div> <!-- .question -->
<!-- Question -->
<div class="quiz__question question-2 question__sports">
<div class="wrapper">
<!-- <img src="http://placehold.it/500x300" alt="" class="quiz__image"> -->
</div>
<h3>Question #2</h3>
<p class="quiz__description">Which former Brandon skip refused to talk to the local media after losing his fifth provincial men’s curling championship game in six years at Westman Place?</p>
<div class="quiz__responses">
<button class="quiz__response answer--false">Russ Howard <i class="fa fa-times"></i></button>
<button class="quiz__response answer--false">Kerry Burtnyk <i class="fa fa-times"></i></button>
<button class="quiz__response answer--true">Mike McEwen <i class="fa fa-check"></i></button>
<button class="quiz__response answer--false">Braden Calvert <i class="fa fa-times"></i></button>
</div> <!-- .responses -->
</div> <!-- .question -->
<!-- McEwen’s Winnipeg based team of B.J. Neufeld, Matt Wozniak and Denni Neufeld lost to Ried Carruthers 53 at the Safeway Championship hosted by Brandon. -->
</div> <!-- quiz -->
首先，您可以使用事件委派[section直接和委派事件]来绑定单个事件处理程序，而不是为每个按钮绑定一个。
$(".quiz__response").on("click", function(){$(document).on("click", ".quiz__response", function(){
要仅在与特定问题相关的答案上添加.is--unclickable，请更改$(".quiz__response").addClass("is--unclickable");
至$(this).siblings().addBack().addClass("is--unclickable");
或$(this).parent().children().addClass("is--unclickable");
要显示fa-times或fa-check，请更改$(".fa-check").show();$(".fa-times").show();
到$(this).find("i").show();（if和else语句中的）
如果勾选了正确答案，则在if语句中添加$(this).siblings().addClass("is--false");，将剩余答案涂成红色。
编辑
完整js更改
$(document).on("click", ".quiz__response", function() {
$(this).siblings("button").addBack().addClass("is--unclickable");
$(this).siblings(".quiz__info").show(); // Show extra info
console.log("Clicked");
if ($(this).hasClass("answerswer--true")) {
$(this).addClass("is--true");
$(this).siblings("button").addBack().find("i").show();
$(this).siblings("button").addClass("is--false");
// Update score
score++
$(".quiz__correct").html(score);
$(".quiz__correct--mobile").html(score);
} else {
$(this).addClass("is--false");
$(this).find("i").show();
}
});
相关文章：
- fluxxor向一个flux实例添加一组以上的操作
- 我们怎样才能将内含子J用于一组特定的元素
- 使用linq.js按当前日期订购一组momentjs日期
- 正则表达式，从一组关键字中获取奇数
- 创建一组元素JointJS
- 如何在javascript中获取一组复选框值
- 一组(共组..）
- 使用JS将页面中的每个字母设置为随机颜色.为什么在页面的每个打开标记之前总是有一组额外的span标记
- 在一组复选框中，一次只允许选择一个
- 为什么在fabricjs中可选择的不适用于一组圆
- 如何在不刷新页面的情况下每次单击一组选项卡时刷新视图内容窗格
- 从一组具有相同起始和结束的所有段落的段落中提取包含特定字符串的段落
- 简单的Javascript文本编辑器或一组函数
- 基于日期范围的一组日期范围内的天数
- 处理对象数组并将它们以 4 个为一组进行分配
- 如何在 Javascript 中用一组字符拆分子字符串上的字符串
- 使一组对象与 jQuery 一起拖动
- 因果报应可能运行了一组错误的测试——如何解决这个问题
- 针对测验中的一组按钮，而不是点击时的所有测验问题
- 我有一组问题在html的形式
