工作: 最初，当测验位于index.html 内时，一切正常。我可以使用 #quiz 访问测验部分，如下所示:
<div data-role="content">
<ul data-role="listview">
<li><a href="#quiz">Quiz Page</a></li>
<li><a href="#page3">Page Three</a></li>
</ul>
然后，我决定将测验作为独立的 html 页面。 因此，我从 index.html 中剪切了用于评分和问题隐藏显示脚本以及测验问题的 javascript，并将其粘贴到 quiz.html 页面中。 为了访问这个测验页面，我将index.html中的链接修改为
<div data-role="content">
<ul data-role="listview">
<li><a href="quiz.html">Quiz Page</a></li>
<li><a href="#page3">Page Three</a></li>
</ul>
</div>
评分脚本如下(简化):
<script type="text/javascript"> //scoring script
function getScore(form){
//score counting algorithm
score = Math.round(score/AnswersAndObjects.length*100);
form.percentage.value = score + "%";
}
</script>
问题 hide-show 脚本如下(简化):
<script type="text/javascript"> //quiz question hide-show script
$(document).ready(function () {
var currentQuestion=0;
var totalQuestions=$('.questions').length;
$questions = $('.questions');
//show the first question
//when users click on the "Next question button...
$('#next').click(function(){
$($questions.get(currentQuestion)).fadeOut(function(){ //hide the current question
//go to next question
if(currentQuestion == totalQuestions){ //if no more question
//do hide and show div class
}else{
//else display the current question
}
});
});
});
</script>
供您引用，每个问题都包装为
<div class="questions">Question here</div>
问题: 当我从index.html 访问quiz.html 时，没有任何效果。无法计算分数并且 show() hide() 不起作用。 但是，如果我直接访问 quiz.html，一切正常。 我怀疑当从index.html 访问quiz.html 时，javascript 没有加载。不过，我已经包含了
$(document).ready(function () {
在 quiz.html 中。
我可以知道如何才能完成这项工作吗？
最佳答案
通过遵循 Gajotres 的示例，我能够使我的测验应用程序正常运行。骨架看起来像这样:
<body>
<div data-role="page">
<div data-role="header">
<h1>Quiz</h1>
</div>
<div data-role="content">
<div class = "heading1">
<p> Answer the quiz</p>
</div>
<form name="quiz" method="">
<div data-role="fieldcontain" class="questions">
<fieldset data-role="controlgroup" data-mini="true">
<legend>Question 1 bla bla bla</legend>
<input type="radio" name="question1" id="choice1" value="1"/>
<label for="choice1">True</label>
<input type="radio" name="question1" id="choice2" value="2"/>
<label for="choice2">False</label>
</fieldset>
</div>
//other n questions follow
<div>
<script>
var currentQuestion=0;
var totalQuestions=$('.questions').length;
//hide and show elements statements here
var AnswersAndObjects = new Array();
function getScore(form){
//score counting algorithm here.
</script>
</div>
本质上，我将这两个脚本移至 <div> 内 quiz.html 的 body 中。 。它有效。但是，我确实注意到脚本必须放置在</form>之后 ，就在 之前，以便脚本正常工作。我不知道为什么，但它是这样工作的。
另外，我删除了
$(document).ready(function () {}而且它也有效。
关于javascript - 从 index.html 打开 quiz.html 页面时怀疑 javascript 未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16690849/