为什么这个HTML / CSS / jQuery代码只能在CodePen中使用？

Question

此代码在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);
  }

});

Answer 1

在包含自定义脚本之前包括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功能。

Answer 2

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>');
  }
});

为什么这个HTML / CSS / jQuery代码只能在CodePen中使用？

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-04-20 02:43:17

解决方案2
0 2014-04-20 03:09:21

为什么这个HTML / CSS / jQuery代码只能在CodePen中使用？

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-04-20 02:43:17

解决方案2 0 2014-04-20 03:09:21

解决方案1
3 已采纳 2014-04-20 02:43:17

解决方案2
0 2014-04-20 03:09:21