Question

我正在尝试学习做一个简单的测验。所以我在StackOverflow中有一个脚本。它在这里工作http://jsfiddle.net/Zy4gW/，但不是在我使用它时，这是我的代码

<html>
<head>
<title>Learning how to make a quiz</title>
<script type="text/javascript">

$(function(){

$('#q-and-a li a').each(function(){
  $(this).click(function(){
      $(this).siblings('div').slideToggle(300);            
  });        
});                

});
</script>
</head>

<body>

<ul id="q-and-a">
    <li><a>Question One</a>
    <div>Answer to Question One...</div>
  </li>
     <li><a>Question Two</a>
     <div>Answer to Question Two...</div>
  </li>
</ul>

<style>
    ul { margin: 0; padding: 0; }
    ul li { margin: 0; padding: 0; list-style: none; }
    ul li a { color: blue; }
    ul li div { display: none; }
</style>


</body>
</html>

为什么不运行？

Answer 1

将其置于脚本[title标记下方]

之上

Jquery库

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

Answer 2

<!DOCTYPE html>

<html>
<head>
<title>Learning how to make a quiz</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                    //You had not imported this library which is required for running jQuery
<script type="text/javascript">

$(document).ready((function(){                
  $('#q-and-a li a').click(function(e){           
    $(this).next('div').slideToggle(300);        //div is child of li not a sibling         
  });       
}));      
</script>
</head>

<body>

<ul id="q-and-a">
    <li><a >Question One</a>
    <div>Answer to Question One...</div>
  </li>
     <li><a >Question Two</a>
     <div>Answer to Question Two...</div>
  </li>
</ul>

<style>
    ul { margin: 0; padding: 0; }
    ul li { margin: 0; padding: 0; list-style: none; }
    ul li a { color: blue; }
    ul li div { display: none; }
</style>


</body>
</html>

您的错误如下： 1）您没有导入jQuery所需的库 2）用于访问div元素的函数实际上div是li的子元素。你是以李的兄弟身份来访问它的 3）不需要.each功能分别访问li

Answer 3

您正在使用jQuery，但我无法看到您在何处加载ressource。看看hosted libraries

Answer 4

您肯定希望确保您的资源正确加载，如其他人所述。检查浏览器的开发工具以查看是否加载了资源，并检查控制台以查看是否有任何错误。

我还建议您在文件中添加doctype（位于开头<html>标记前面的顶部：

<!DOCTYPE html>

缺少的doctype可能不会导致您的问题 - 但话说回来，我发现有些奇怪的事情发生了。更不用说，最好始终包括这个。

极简单的HTML js代码，但为什么它不起作用？

4 个答案: