如何将jsfiddle.net上的代码放入我的网站？

Question

4

我一直在尝试在网页底部创建一个小框，当鼠标滚过时会展开/弹出，然后当鼠标移开时再关闭。

我找到了这个帖子，其中包含了一个指向 jsfiddle.net 的链接（我已经在上面进行了一些实验），并创建了一个与我想要的完全相同的东西。但是当我将其放到我的网站上时，无法运行它（我认为这可能与 onLoad 设置有关，但我真的不确定）。

这是我在 JSFiddle 上创建的内容：

$('#box').hover(function() {
  $(this).animate({
    height: '220px'
  }, 150);
}, function() {
  $(this).animate({
    height: '20px'
  }, 500);
});

#box {
  position: absolute;
  width: 300px;
  height: 20px;
  left: 33%;
  right: 33%;
  min-width: 32%;
  bottom: 0;
  background-color: #000000;
}

<div id="box"></div>

这段代码在JSFiddle中可以正常工作，但是当我尝试将代码插入到我的文件并链接在一起时就无法正常工作了。如果我将JSFiddle中的下拉框从“onLoad”或“onDomReady”更改为其他任何选项，它就会停止工作，但是代码并没有改变。因此，我认为我需要在某个地方添加其他内容。

由于我完全不懂JavaScript，所以肯定做错了什么。请问有谁能告诉我如何保存JavaScript代码并将其链接到我的网页，使其与JSFiddle上的代码完全相同？

- Flickdraw

1

JavaScript需要jQuery库，默认情况下jsFiddle已经加载了它。请确保在您自己的页面中也已经包含了它。 - drudge

作为附注，你应该访问w3schools.com并查看他们的JavaScript教程。这将帮助你更好地理解JavaScript及其工作原理。 - Moses

3

不，那是一个糟糕的建议。请参考 http://w3fools.com 了解原因。我建议使用 http://jqfundamentals.com。 - lonesomeday

@lonesomeday 哇，你说得完全正确。我从未意识到w3schools的文档是如此贫乏和过时的（自从我第一次学习css以来，我实际上从未使用过它）。 - Moses

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lonesomeday · Accepted Answer

你正在立即运行这段代码，而不是等待DOM准备好。这意味着元素#box可能还不存在。

jsFiddle自动化此过程以使您的代码更加简洁。将代码放入自己的网站时，您需要自己完成此过程。这非常容易：您只需要将代码放入文档上ready事件的回调中即可。

$(document).ready(function() {
    // put your Javascript here
});

或者，有一个简短的版本：

$(function(){
    // put your Javascript here
});

这些在语义和功能上是等效的。