Question

此代码在JSFiddle中正常运行，但在Chrome或Firefox中无效。我在链接CSS或JavaScript时做错了吗？在Firefox控制台中，我收到$未定义的错误。我不正确地链接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 Demo

错误在于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 个答案: