我有一个问题列表,用户必须在其中选择是非。
该列表是自动生成的。但是,假设我有3行,如下所示:
html为了看到是:
<div>
<div>
<h2>1. You should always let your car warm up before you drive it.</h2>
</div>
</div>
<div>
<div class="quiz-cols">
<div class="true-placeholder"><a href="#" data-answer="true" class="icon-true-shape amenitie_icon"></a></div>
</div>
<div class="quiz-cols">
<div class="false-placeholder"><a href="#" data-answer="false" class="icon-false-shape amenitie_icon"></a></div>
</div>
</div>
<div>
<div>
<h2>2. Turning off the A/C can improve fuel efficiency.</h2>
</div>
</div>
<div>
<div class="quiz-cols">
<div class="true-placeholder"><a href="#" data-answer="false" class="icon-true-shape amenitie_icon"></a></div>
</div>
<div class="quiz-cols">
<div class="false-placeholder"><a href="#" data-answer="false" class="icon-false-shape amenitie_icon"></a></div>
</div>
</div>
<div>
<div>
<h2>3. You should top off your gas tank.</h2>
</div>
</div>
<div>
<div class="quiz-cols">
<div class="true-placeholder"><a href="#" data-answer="true" class="icon-true-shape amenitie_icon"></a></div>
</div>
<div class="quiz-cols">
<div class="false-placeholder"><a href="#" data-answer="true" class="icon-false-shape amenitie_icon"></a></div>
</div>
</div>
到目前为止,这是我所拥有的逻辑,它允许元素更改其颜色和类似内容。但是我想知道我该怎么做才能使该应用程序不允许用户每行选择多个选项。并且,如果用户已经选择了一个,则无法更改其选择。
ArticleQuiz.prototype.quizLogic = function(){
var THIS = this;
$('.masthead-article-quiz').parent().css('background', '#eeeeee');
$('.quiz-cols a').on('click', $(this), function(e) {
e.preventDefault();
if ($(this).data('answer') === true) {
$(this).addClass('background-green')
$(this).addClass('new-color');
} else if ($(this).data('answer') === false) {
$(this).addClass('background-red');
$(this).addClass('new-color');
}
});
return THIS;
};
这不是我想要的:
如您所见,它们都是彩色的。它们中只有一种应具有颜色,如果用户选择了错误的颜色,但那时候是正确的答案,则图标应为绿色,如果不正确,则图标应为红色。
建议书?
最佳答案
您可以这样做:
$('.quiz-cols a').click(function(e) {
e.preventDefault();
// exit if choice already made: users can't change their pick
if ($(this).parents('.quiz-cols').parent().find('.new-color').length) return;
// set class according to data-answer:
$(this).addClass('background-' + ($(this).data('answer')=='true' ? 'green' : 'red'))
.addClass('new-color');
});