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

【问题标题】：Extreamly simple HTML js code,but why doesn`t it work?极其简单的 HTML js 代码，但为什么不起作用？
【发布时间】：2015-10-15 06:16:27
【问题描述】：

我正在尝试学习做一个简单的测验。所以我在 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>

为什么不运行？

【问题讨论】：

你忘记调用 jquery 库了。

标签： javascript jquery html css json

【解决方案1】：

<!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 的子元素。您正在以 li 的兄弟身份访问它。
3）不需要.each函数单独访问li

【讨论】：

【解决方案2】：

把它放在你的脚本上面[title标签下面]

jQuery 库

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

【讨论】：

这也行不通学习如何做一个测验
如果您双击并打开文档中的 html 文件。这行不通。您必须使用 WAMP 或在某处托管您的代码。让我用另一种解决方案更新我的答案。现在检查我的答案。通过@alireza 更新

【解决方案3】：

您正在使用 jQuery，但我看不到您在哪里加载资源。看看hosted libraries

【讨论】：

使用了这个
不仅仅是脚本标签。你的脚本标签是完美的。 redsource 的脚本标签将是第二个（在顶部）

【解决方案4】：

您肯定希望确保您的资源正确加载，正如其他人在此处指出的那样。检查浏览器的开发工具是否加载了资源，并检查控制台是否有错误。

我还建议在您的文件中添加一个 doctype（在最顶部，在打开 <html> 标签之前：

<!DOCTYPE html>

缺少的文档类型可能不会导致您的问题 - 但话又说回来，我看到了奇怪的事情发生。更不用说，最好始终包含此内容。

【讨论】：

@piyushashtikar 不管怎样——你应该总是声明一个文档类型。您是否尝试过检查开发工具以查看 jQuery 是否正确加载？按键盘上的 F12 或右键单击 -> 检查元素。转到您正在加载 jQuery 的 HTML 中的链接并单击它 - 它应该会打开 jQuery 资源。如果没有出现，则该资源未正确加载。另外，检查控制台选项卡，看看它是否报告任何 javascript 错误。
@piyushashtikar 确保您不仅要加载 jQuery，还要在脚本标签中包含其余的 javascript：<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ $('#q-and-a li a').each(function(){ $(this).click(function(){ $(this).siblings('div').slideToggle(300); }); }); }); </script>