从 HTML 链接时 JavaScript 文件不起作用

问题描述 投票：0回答：9

所以我觉得（并希望）这很简单。我是 javascript 新手，正在尝试让它工作。当我从 html 链接到外部 .js 文件时，它不起作用。但是，当将脚本代码直接输入到我的 HTML 中时，它确实可以工作。

这是js文件：

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

这是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>

这是 CSS：

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
javascript jquery html dom
9个回答
16
投票

您正在使用 jQuery，但您似乎没有包含它。将其添加到您的 HEAD 元素 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
2
投票

您需要导入 jQuery。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
2
投票

实际上，我遇到了这样的问题，我尝试了下面的代码。

<head>
<meta charset="ISO-8859-1">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
1
投票

我也有类似的问题。 下面是两个文件中的代码，它仅生成白色的空白页面， 执行代码没有报错，请问是什么问题？

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 文件：

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();
0
投票

您的 

<head>
部分中没有 jquery。在添加
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>

如果您在本地计算机上测试此功能，请将 

http
添加到 src 或下载您自己的 jQuery 副本。

作为旁注，最好在 

stylesheets
文件之前添加 
js
。

0
投票

看起来你缺少 jQuery。在包含您自己的 JavaScript 代码之前包含它。

0
投票

您的脚本包含 jQuery。为了使用它，您有 2 个选项：

1.下载到您的网页：

  • 从 jQuery.com
    • 下载生产版本
  • 在
    <head></head>
    部分添加：
    <script src="jquery-1.11.3.min.js"></script>

2.包含来自 CDN 的 jQuery：

  • 您可以通过将以下内容添加到
    <head></head>
    部分来使用Google的CDN：
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
0
投票

我也遇到了同样的问题，直到我将行的位置更改为结束标记之前的代码末尾并且它起作用了。在我看来，位于标题的功能会被重写。

0
投票

就我而言，这是因为我在脚本标签中指定了错误的

type
。应该是：

type="text/javascript"

希望这对其他人有帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.