jQuery 从 HTML 链接时，javascript 文件不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17505563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript file not working when linked from HTML
提问by doriansm
so I feel(and hope) this is pretty simple. I am new to javascript and am trying to get this working. When I link to my external .js file from my html it does not function. However, when entering the script code directly into my HTML it DOES work.
所以我觉得（并希望）这很简单。我是 javascript 的新手，正在努力让它发挥作用。当我从我的 html 链接到我的外部 .js 文件时，它不起作用。但是，当将脚本代码直接输入到我的 HTML 中时，它确实有效。
Here is the js file:
这是js文件：
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
This is the index.html file:
这是 index.html 文件：
<!DOCTYPE html>
<html>
<head>
<title>slidepanel test</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
and this is the CSS:
这是 CSS：
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
回答by woot
You are using jQuery, but it doesn't seem like you have included it. Add this to your HEAD element
您正在使用 jQuery，但您似乎没有包含它。将此添加到您的 HEAD 元素
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
回答by user3631524
Actually, i had a problem like this and i tried the code below.
实际上，我遇到了这样的问题，我尝试了下面的代码。
<head>
<meta charset="ISO-8859-1">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
回答by Dan
You need to import jQuery.
您需要导入 jQuery。
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
回答by turnt
Looks like you're missing jQuery. Include it before you include your own JavaScript code.
看起来您缺少 jQuery。在包含您自己的 JavaScript 代码之前包含它。
回答by krishgopinath
You dont have jquery in your <head>section. Add it before you add scripts.js. Only then will your code work.
您的部分中没有 jquery <head>。在添加之前添加它scripts.js。只有这样你的代码才能工作。
<head>
<title>slidepanel test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
If you're testing this in your local machine, add a httpto the src or download your own copy of jQuery.
如果您在本地机器上测试这个，请将 a 添加http到 src 或下载您自己的 jQuery 副本。
And just as a sidenote, its always better to add stylesheetsbefore your jsfiles.
作为旁注，stylesheets在您的js文件之前添加总是更好。
回答by mdahhani
Your script contains jQuery.In order to use it, you have 2 options:
您的脚本包含 jQuery。为了使用它，您有 2 个选项：
1. Download it to your web page:
1. 将其下载到您的网页：
- Dowload the production version from jQuery.com
- In the
<head></head>section add:<script src="jquery-1.11.3.min.js"></script>
- 从jQuery.com 下载生产版本
- 在该
<head></head>部分添加：<script src="jquery-1.11.3.min.js"></script>
2. Include jQuery from a CDN:
2. 从 CDN 中包含 jQuery：
- You can use Google's CDN by adding the following to the
<head></head>section:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- 您可以通过将以下内容添加到该
<head></head>部分来使用 Google 的 CDN ：<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
回答by barkman345
I have similar problem. Below is a code in two files which generates only white empty page, no errors are reported executing code, what is the problem?
我有类似的问题。下面是两个文件中的代码，只生成了白色的空页，执行代码没有报错，是什么问题？
index.html file:
index.html 文件：
<!DOCTYPE html>
<html>
<head>
<title>Three.js</title>
<style type = "text/css">
html, body {margin: 0; padding: 0; overflow: hidden}
</style>
</head>
<body>
<div id = "webgl"></div>
<script src = "/lib/three.js"></script>
<script src="./main.js"></script>
</html>
main.js file:
main.js 文件：
function init() {
var scene = new THREE.Scene();
var box = getBox(1, 1, 1);
var plane = getPlane(4);
box.position.y = box.geometry.parameters.height/2;
plane.rotation.x = Math.PI/2;
scene.add(box);
scene.add(plane);
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth/window.innerHeight,
1,
1000
);
camera.position.x = 1;
camera.position.y = 2;
camera.position.z = 5;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('webgl').appendChild(renderer.domElement);
renderer.render(
scene,
camera
);
}
function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var mesh = new THREE.Mesh(
geometry,
material
);
return mesh;
}
function getPlane(size) {
var geometry = new THREE.PlaneGeometry(size, size);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(
geometry,
material
);
return mesh;
}
init();
