8

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

8 回答 8

15

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

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
于 2013-07-06T17:51:48.753 回答
2

您需要导入 jQuery。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
于 2013-07-06T17:52:46.527 回答
2

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

<head>
<meta charset="ISO-8859-1">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
于 2014-06-18T07:24:31.183 回答
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。

于 2013-07-06T17:51:55.887 回答
0

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

于 2013-07-06T17:53:17.303 回答
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>
于 2015-06-19T12:50:14.143 回答
0

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

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();
于 2019-06-19T15:56:45.717 回答
0

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

于 2021-04-05T08:10:58.660 回答