此代码在JSFiddle中运行良好,但在Chrome或Firefox中不适用。 我在链接CSS或JavaScript时做错了吗? 在Firefox控制台中,我收到$ undefined的错误。 我不正确地链接jQuery?


index.html的:

<!DOCTYPE HTML>
<head>
    <title>Digital Etch-A-Sketch</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>

    <div id="wrapper">


    </div>

<script src="etch-a-sketch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

</body>

</html>

的main.css:

//Etch-A-Sketch - CSS

.square {
  float: left;
  height: 48px;
  width: 48px;
  background-color: black;
  border: 1px solid white;
}

#wrapper {
  position: relative;
  top: 50px;
  margin: 0 auto;
  height: 200px;
  width: 200px;
}

蚀刻-A-草图:

$(document).ready(function(){

  var wrapper = $('#wrapper');

  for (var i = 0;i < 16; i++) {
    var div = $('<div class="square"></div>');
    wrapper.append(div);
  }

});

===============>>#1 票数:3 已采纳

包含自定义脚本之前包括jQuery库:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="etch-a-sketch.js"></script>

否则,您在尝试使用库之前尝试使用jQuery功能。

===============>>#2 票数:0

JSFIDDLE DEMO

Codepen演示

错误在于Jquery! 你必须使用.html()来通知jquery从HTML文档中提取#wrapper

顺便说一句,这也有效

Jquery:

$(document).ready(function(){
  for (var i = 0;i < 16; i++) {
    $('#wrapper').append('<div class="square"></div>');
  }
});

  ask by John D. translate from so

未解决问题?本站智能推荐:

3回复

代码可以在Codepen上使用,但不能在JSFiddle或HTML页面上使用

当您滚动时,我有一个横幅要模糊,我找到了一个代码。 我对其进行了编辑,它在Codepen中看起来很漂亮,但是在JSFiddle或HTML页面中却无法使用。 我将在下面发布每个链接。 我可能只是做错了什么,但我们将不胜感激。 Codepen(运作中): http ://codepen.
2回复

JSFiddle提供的额外CSS

我正在尝试复制此JSFiddle ,但似乎JSFiddle正在注入一些额外的CSS,这导致该副本与JSFiddle上的版本显示不同。 如何使副本看起来像JSFiddle结果? 我尝试复制<iframe>的源,但这没有用。 <!DOCTYPE html
3回复

jQuery如果语句问题

我正在制作的反应测试中遇到更多问题。 出于某种原因,'div'在点击时不会“隐藏”。 我基本上想要它,以便在点击之后,有一个随机的暂停,然后'div'再次出现在下一个指定的位置。 我认为问题可能在于以下代码。 你可以在这里试试: http : //jsfiddle.net/FWSc
2回复

Animate.css摇晃不起作用

所以我正在使用Animate.css库,如果您不知道我在说什么https://github.com/daneden/animate.css,这里是链接 所以我要这样: <h1><a id="Header" class="Header">My First Headin
1回复

jQuery反应测试延迟问题

我在进行反应测试时遇到了一些问题: 好吧,首先,我想在播放器单击div之后随机暂停(2-5秒)。 其次,我希望div总共出现5次,因此玩家获得5次尝试。 对于第一个问题,我尝试使用setTimeout函数。 我试图通过使用“ for”循环来限制div出现的次数来解决第
1回复

从JSFiddle发布复制代码

我正在尝试从jsfiddle复制一些代码,这是一个径向加载栏。 我想将其放入html / css文件并弄乱代码,但是我似乎无法使其正常工作。 它只是显示为空白,什么也不显示。 JSFiddle链接是http://jsfiddle.net/andsens/d7vKd/ 。 谢谢您的帮助:)
4回复

jQuery不在页面上执行,但在JSFiddle中执行

我做了一个jQuery代码。 它在JSFiddle上运行得很好,但是在我的页面上不起作用。 我检查了其他问题和解决方案,但都无济于事,所以我再次询问。 这是代码: HTML: CSS: JavaScript: 就像您看到的那样,但是我不得不停下来,因为jQ
1回复

jsfiddle问题-另存为html时输出未正确显示

我似乎对jFiddle有一个经常发生的问题(阅读:我显然不知道该死)。 让我们看下面的链接示例: http://jsfiddle.net/t6LLybx8/728/ 如果右键单击实际输出并选择“查看帧源”,则会得到以下代码: <!DOCTYPE html&
1回复

Javascript可在JS Fiddle中使用,但不适用于Chrome / IE

我不明白为什么我的代码在我的浏览器中不起作用,但是却无济于事。 http://jsfiddle.net/4tafnwcj/2/ 当我单击一个计划时,总计应该输出价格,但是,这在浏览器中不会发生。 我检查了开发工具,清除了缓存,但没有帮助。 我还包含了所有必要的jquery,js文件,
1回复

代码可在JSFiddle上运行,但是在本地保存时不起作用[重复]

这个问题已经在这里有了答案: 代码无法在jsFiddle之外工作 2答案 我正在尝试接受用户的输入并将其显示为列表。 值得庆幸的是,已经有人在JSFiddle上找到了它。 该代码在这里工作正常,但是当我将其移动到本地时,它无法正常工作。 当我输入文字时,什么也