我正在创建一个测验，用户可以在其中选择真或假按钮。当我分解它时，一切似乎都很好，除了我无法在这一行得到正确的逻辑：
if ((correctAnswer == "t") && ($(this).hasClass('.true'+selectedAnswer))) {
correctAnswer 取自正确答案的变量，我想将其与按下“真”或“假”按钮的情况进行比较。
我已经通过 jsfiddle 运行了它，并且在语法上它“显然”是正确的。
jsfiddle在这里-> JSFiddle
这是完整的代码：
<style type="text/css">
#c1,#c2,#c3,#c4,#c5,#c6,#c7,#next_area,.q_answer{ display: none; }
#current_progress {
width: 43.2%;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
// if correct amount of answers, show the next button
function checkAnswers() {
if (correct === correct_answers) {
$("#next_area").fadeIn('slow');
} else {
$("#next_area").fadeOut('slow');
}
}
// vars to hold the total correct answers and the current running total
var correct_answers = 1;
var correct = 0;
// correct answers to the questions
var q1 = "f";
var q2 = "f";
var q3 = "f";
var q4 = "t";
var q5 = "f";
var q6 = "f";
var q7 = "f";
// make question boxes act like a link to click
$(".answer_box").mouseover(function() {
$(this).css('cursor', 'pointer');
});
// function to check questions
// listen for a click on any of the answer buttons
$("#qs .answer_box").click(function() {
//grab the id of the button clicked
var selectedAnswer = $(this).attr('id');
// grab the correct answer from var
var correctAnswer = "q"+selectedAnswer;
// if the correct answer is true and the true button was pressed
if ((correctAnswer == "t") && ($(this).hasClass('.true'+selectedAnswer))) {
// check if false has already been selected
if ($(".false"+selectedAnswer).hasClass('active')) {
// if false selected, remove the class and make true active
$(".false"+selectedAnswer).removeClass("active");
$(".true"+selectedAnswer).addClass("active");
correct++;
checkAnswers();
}
// if true has already been selected do nothing
else if ($(".true"+selectedAnswer).hasClass('active')) {
}
else {
// if neither true or false has been selected
$(".true"+selectedAnswer).addClass("active");
correct++;
checkAnswers();
}
// if the correct answer is false and the true button was pressed
} else if ((correctAnswer == "f") && ($(this).hasClass('.true'+selectedAnswer))) {
// check if false has already been selected
if ($(".false"+selectedAnswer).hasClass('active')) {
// if false selected, remove the class and make true active
$(".false"+selectedAnswer).removeClass("active");
$(".true"+selectedAnswer).addClass("active");
correct--;
checkAnswers();
}
// if true has already been selected do nothing
else if ($(".true"+selectedAnswer).hasClass('active')) {
}
else {
// if neither true or false has been selected
$(".true"+selectedAnswer).addClass("active");
correct--;
checkAnswers();
}
// if the correct answer is false and the false button was pressed
} else if ((correctAnswer == "f") && ($(this).hasClass('.false'+selectedAnswer))) {
// check if true has already been selected
if ($(".true"+selectedAnswer).hasClass('active')) {
// if false selected, remove the class and make true active
$(".true"+selectedAnswer).removeClass("active");
$(".false"+selectedAnswer).addClass("active");
correct++;
checkAnswers();
}
// if false has already been selected do nothing
else if ($(".false"+selectedAnswer).hasClass('active')) {
}
else {
// if neither true or false has been selected
$(".false"+selectedAnswer).addClass("active");
correct++;
checkAnswers();
}
// if the correct answer is true and the false button was pressed
} else if ((correctAnswer == "t") && ($(this).hasClass('.false'+selectedAnswer))) {
// check if true has already been selected
if ($(".true"+selectedAnswer).hasClass('active')) {
// if false selected, remove the class and make true active
$(".true"+selectedAnswer).removeClass("active");
$(".false"+selectedAnswer).addClass("active");
correct--;
checkAnswers();
}
// if false has already been selected do nothing
else if ($(".false"+selectedAnswer).hasClass('active')) {
}
else {
// if neither true or false has been selected
$(".false"+selectedAnswer).addClass("active");
correct--;
checkAnswers();
}
}
});
});
</script>
</head>
<body>
<div id="progress">
<div id="progress_div">
<div id="slide">
Complete [27/61]
</div>
<div id="progress_bar">
<div id="current_progress"></div>
</div>
</div>
</div>
<div class="pagewidth">
<div id="intro">
<h1>Infection Control Training - Clinical Staff</h1>
</div>
<div id="head">
<h2>Personal protective Equipment (PPE)</h2>
</div>
<div id="main">
<div id="q_direction">
<h3>Please answer the below question to proceed</h3>
<p class="txt italic marg_bot">You will not be able to proceed to the next page until you get the answers correct. If you get an answer wrong you can undo the incorrect answer marked with "X" by re-clicking and trying again with another answer.</p>
</div>
<h2 class="blue">Q: Gloves should routinely be worn for?</h2>
<table id="qs">
<tr>
<td class="tf_question_box">
Writing in notes
</td>
<td class="answer_box true1" id="1">
True
</td>
<td class="answer_box false1" id="1">
False
</td>
</tr>
<tr>
<td class="tf_question_box">
Answering the phone
</td>
<td class="answer_box true2" id="2">
True
</td>
<td class="answer_box false2" id="2">
False
</td>
</tr>
<tr>
<td class="tf_question_box">
Collecting linen
</td>
<td class="answer_box true3" id="3">
True
</td>
<td class="answer_box false3" id="3">
False
</td>
</tr>
<tr>
<td class="tf_question_box">
When there is a risk of contact with blood or body fluids
</td>
<td class="answer_box true4" id="4">
True
</td>
<td class="answer_box false4" id="4">
False
</td>
</tr>
<tr>
<td class="tf_question_box">
Making beds
</td>
<td class="answer_box true5" id="5">
True
</td>
<td class="answer_box false5" id="5">
False
</td>
</tr>
<tr>
<td class="tf_question_box">
Walking in the corridor
</td>
<td class="answer_box true6" id="6">
True
</td>
<td class="answer_box false6" id="6">
False
</td>
</tr>
<tr>
<td class="tf_question_box">
Giving out food and drinks
</td>
<td class="answer_box true7" id="7">
True
</td>
<td class="answer_box false7" id="7">
False
</td>
</tr>
</table>
<div id="next_area">
<p><span class="correct_txt">That's correct!</span> Click 'NEXT' to continue.</p>
<a href="page23.html"><img src="infectionControl_img/next_btn.png" onmouseover="this.src='infectionControl_img/next_btn_hvr.png'" onmouseout="this.src='infectionControl_img/next_btn.png'" id="next_btn"></a>
</div>
</div>
<div id="imgs_plain">
<img src="infectionControl_img/questions.jpg">
</div>
<div id="footer">
</div>
</div>
</body>
你能明白为什么这不起作用吗？