我正在创建一个测验，用户可以选择true或false按钮。当我把它分解时，一切似乎都能正常工作，除了我不能在这一行上得到正确的逻辑：
if ((correctAnswer == "t") && ($(this).hasClass('.true'+selectedAnswer))) {
correctAnswer来自正确答案的变量，我想比较一下是否按下了true的假按钮。
我通过jsfiddle运行它，从语法上说它“显然”正确。
jsfiddle here - ＆gt; 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>
你能明白为什么这不起作用吗？
答案 0 :(得分：1)
将.true更改为true
if ((eval(correctAnswer) == "t") && ($(this).hasClass('true'+selectedAnswer)))
使用前面没有.的班级名称。请参阅：http://api.jquery.com/hasClass/
修改：
使用eval（）来评估动态变量。
答案 1 :(得分：1)
正如我在评论中发表的那样，您不需要提供。使用hasClass时。即。
hasClass('true'+selectedAnswer)
而不是
hasClass('.true'+selectedAnswer)
请尝试以下
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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 answers = ["f", "f", "f", "t", "f", "f", "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('data-id');
// grab the correct answer from var
var correctAnswer = answers[selectedAnswer - 1];
// 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>
<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" data-id="1">
True
</td>
<td class="answer_box false1" data-id="1">
False
</td>
</tr>
<tr>
<td class="tf_question_box">
Answering the phone
</td>
<td class="answer_box true2" data-id="2">
True
</td>
<td class="answer_box false2" data-id="2">
False
</td>
</tr>
<tr>
<td class="tf_question_box">
Collecting linen
</td>
<td class="answer_box true3" data-id="3">
True
</td>
<td class="answer_box false3" data-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" data-id="4">
True
</td>
<td class="answer_box false4" data-id="4">
False
</td>
</tr>
<tr>
<td class="tf_question_box">
Making beds
</td>
<td class="answer_box true5" data-id="5">
True
</td>
<td class="answer_box false5" data-id="5">
False
</td>
</tr>
<tr>
<td class="tf_question_box">
Walking in the corridor
</td>
<td class="answer_box true6" data-id="6">
True
</td>
<td class="answer_box false6" data-id="6">
False
</td>
</tr>
<tr>
<td class="tf_question_box">
Giving out food and drinks
</td>
<td class="answer_box true7" data-id="7">
True
</td>
<td class="answer_box false7" data-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>