功能不会在问题之间跳过

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

您的实现缺少document ready。这是必要的，因为在jQuery知道您的DOM元素之前，您试图绑定单击处理程序。

另一种方法是将JS放在关闭body元素之前。

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

这意味着jQuery试图选择一个在执行期间不存在的btn（$('.btn')）类元素。准备就绪的文档将执行委派到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>