【发布时间】：2014-10-20 23:24:26
【问题描述】：
这是一个调试问题。我已经用谷歌搜索了这个地狱，查看了关于 first() 选择器的 jQuery 文档，并阅读了大量堆栈溢出帖子，但我根据该研究所做的调整都没有奏效。
目标： 在下面的 sn-p 中，我试图从使用 jquery 在 document.ready() 事件顶部添加到 dom 的一系列 div 中的第一个中删除“隐藏”类。
$(document).on('click','#begin',function(){
$('#intro').addClass('hidden');
$('#form').removeClass('hidden');
$('.question').first().css({'visibility':'hidden'});
});
问题： 出于某种原因，当我使用 first() 选择器时，所有问题都保持隐藏状态。当我不使用它时，正如预期的那样，所有的问题都会暴露出来。这些 div 是使用带有“问题”和“隐藏”类的 jQuery 动态添加的。
上面的 sn-p 出现在我附加的示例代码的第 50 行。这些类的声明出现在第 30 行。
/**
* Created by davidgoldberg on 10/16/14.
*/
function Question(topic,question,choices,correctAnswer){
this.topic = topic;
this.question = question;
this.choices = choices;
this.correctAnswer = correctAnswer;
this.userAnswer = null;
}
var allQuestions;
allQuestions = [
new Question("Addition", "What is 8 + 8?", [16, 18, 64, 28], 16),
new Question("Subtraction", "What is 23-8?", [16, 15, 14, 17], 15),
new Question("Multiplication", "What is 8 * 8?", [16, 18, 64, 36], 64),
new Question("Division", "What is 48/16", [3, "3/2", 4, "8/3"], 3),
new Question("Imaginary Numbers", "What is \u221A(-1)^8?", ["i", "-i", 1, -1], 1)
];
function qToHTML(question) {
var header = "<h2>" + question.topic + "</h2>";
var qText = "<p>" + question.question + "</p>";
var options = "";
for (var i = 0; i < question.choices.length; i++) {
options += "<input type='radio' name='" + question.topic + "' value ='" + question.choices[i] + "'>" + question.choices[i] + "<br>";
}
var wrapper = "<div class='question'></div>";
var HTMLstring;
HTMLstring = header + qText + options;
$("form").append(HTMLstring).wrap(wrapper);
}
$(document).ready(function(){
//set up page
for(var i = 0; i < allQuestions.length; i++){
qToHTML(allQuestions[i]);
}
$('form').append('<input type="submit" value="submit">');
// setup intro
$(document).on('click','#begin',function(){
$('#intro').addClass('hidden');
$('#form').removeClass('hidden');
$('.question').first().css({'visibility':'hidden'});
});
// in-form navigation
$('#next').on('click',function(){
});
//collect and check user answers
$('form').on('submit', function(event) {
var numCorrect = 0;
event.preventDefault();
for(var i = 0; i < allQuestions.length; i++) {
// collect answers
var currentQ = allQuestions[i];
currentQ.userAnswer = $("input[name='" + currentQ.topic + "']:checked").val();
// check answers
if (currentQ.correctAnswer == currentQ.userAnswer) {
numCorrect++;
}
}
// show score
var score = numCorrect + "/" + allQuestions.length;
$('#results').find('p').text("You got " + score + " of the questions right");
$('#results').removeClass('hidden');
// resets buttons
$('input[type="radio"]').each(function(){
$(this).prop('checked', false);
});
});
});.hidden {
display: none;
}<!DOCTYPE html>
<html>
<head>
<title>Dynamic Quiz</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Dynamic Quiz</h1>
<div id='intro'>
<h3>Get ready for the dynamic quiz</h3>
<p>You will be asked a questions from a range of different math subjects. Selecting an answer will bring you to the next page. The 'next' and 'back' buttons do just what you expect. When you are finished, click the 'submit' button at the bottom of the page, and you will be directed to your score. When you are ready, click the 'begin' button below.</p>
<input type="button" id="begin" value="begin">
</div>
<div id='form' class='hidden'>
<form>
<!-- <div class="question hidden">
<h2></h2>
<p></p>
<input type="radio" name="" value="">
<input type="radio" name="" value="">
<input type="radio" name="" value="">
<input type="radio" name="" value="">
<input type="submit" value="submit">
</div> -->
</form>
<span id="nav-buttons">
<button id="previous">previous</button>
<button id="next">next</button>
</span>
</div>
<div id="results" class="hidden">
<h2>Results:</h2>
<p></p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>【问题讨论】：
标签： javascript jquery css show-hide dynamic-html