2

我正在尝试使用 index.html 文件和 script.js 文件运行几行简单的代码，仅此而已。

在 HTML 文件中，我有 doctype html：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>

  <div id="content1">This is content 1  </div>
  <div id="content2">This is content 2  </div>
  <div id="content3">This is content 3  </div>

</body>
</html>

对于我的 javascript 部分，我有：

var elems = $("div");
if (elems.length) {
  var keep = Math.floor(Math.random() * elems.length);
  for (var i = 0; i < elems.length; ++i) {
    if (i !== keep) {
      $(elems[i]).hide();
    }
  }
}

当我在 CodePen 甚至在本网站的代码编辑器中运行它时，它运行良好。但是当我使用桌面上的文件时它不起作用（index.html、script.js 我相信文件夹结构是正确的（script.js 在 javascript 文件夹中。）

谢谢你们

4

2 回答 2

8

在 body 标签结束之前移动你的 script 标签：

<script src="javascript/script.js"></script>
</body>

这样，当您的脚本运行时，DOM 将可用。

如果您希望将脚本保留在head部件中，请将代码包装在DOMContentLoaded事件处理程序中：

document.addEventListener("DOMContentLoaded", function() {
    var elems = $("div");
    if (elems.length) {
      var keep = Math.floor(Math.random() * elems.length);
      for (var i = 0; i < elems.length; ++i) {
        if (i !== keep) {
          $(elems[i]).hide();
        }
      }
    }
});

...所以当 DOM 准备好时让你的代码运行。

您没有用 标记您的问题jquery，但您似乎使用它，您可以使用这个较短的代码来执行与上面基本相同的操作：

$(function() {
    var $elems = $("div").hide(),
    $elems.eq(Math.floor(Math.random() * $elems.length)).show();
});
于 2017-04-13T22:32:16.633 回答
1

将您的代码包装在此函数中以在文档准备好时执行它。

$(document).ready(function (){ 
// your code goes here
 });
于 2017-04-13T22:31:46.227 回答