Question

所以我觉得（希望）这很简单。我是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;
}

Answer 1

您正在使用jQuery，但似乎并未将其包含在内。将其添加到HEAD元素

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

Answer 2

您需要导入jQuery。

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

Answer 3

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

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

Answer 4

您的<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>

如果您在本地计算机上测试它，请在src中添加http或下载您自己的jQuery副本。

作为旁注，最好在stylesheets文件之前添加js。

Answer 5

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

Answer 6

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

1。将其下载到您的网页：

从jQuery.com
在// if remove all objects [matchedCards removeAllObjects]; // if you want to remove using index for (int i =[matchedCards count]-1; i>=0; i++) { if (condition) { [matchedCards removeObjectAtIndex:i]; } }部分添加：<head></head>

2。包含来自CDN的jQuery：

您可以通过在<script src="jquery-1.11.3.min.js"></script>部分添加以下内容来使用Google的CDN：
<head></head>

Answer 7

我有类似的问题。以下是两个文件中的代码，它们仅生成空白页，没有报告执行代码有错误，这是什么问题？

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();

Answer 8

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

从HTML链接时，javascript文件无法正常工作

8 个答案:

1。将其下载到您的网页：

2。包含来自CDN的jQuery：