函数未在问题之间跳过

Question

我正在尝试构建一个可以在问题之间跳过的问卷。当我在opera或chrome中打开html文件时，我只看到1和2。当我按下它们时，什么也没发生。代码如下。如有任何帮助，将不胜感激

$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>

Answer 1

您的实现缺少文档准备。这是必要的，因为您正试图在jQuery了解您的DOM元素之前绑定一个点击处理程序。

另一种方法是将JS放在结束体元素之前。

$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});

这意味着jQuery试图选择一个类为btn($('.btn')(的元素，该元素在执行期间不存在。document-ready将执行委托给jQuery呈现和访问DOM的点。

固定示例

$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/quiz.js"></script>
<link rel ="stylesheet" href="css/stylesheet.css">
<p class="btn" data-linkedto="#b">1</p>
<p class="btn" data-linkedto="#bDate">2</p>
<div id="b" style="display:none" ;>
<div class="container">
<p>Name of school: <br> class: <br>Today's Date: </p>
</div>
</div>
<div id="bDate" style="display:none" ;>
<div class="container">
<form action="/action_page.php">
Date of Birth: <input type="date" name="bday">
<input type="submit">
</form>
</div>
</div>