Question

首先，这是我的代码。

var size = 400

function createGrid(size) {
  $("#create").click(function() {
    for (i = 0; i <= size; i++) {
      $("#container").append('<div class="grid"> </div>');
    }
  });
}

$(document).ready(createGrid);

#container {
  top: 10px;
  position: relative;
  width: 960px;
  height: 960px;
  border-color: black;
  margin: auto;
  outline: 2px solid black;
}
.grid {
  display: inline-block;
  border: 1px solid white;
  background-color: black;
  float: left;
  width: 10px;
  height: 10px;
}

<!DOCTYPE html>
<html>
<title>
  Sam's Etcha Sketch
</title>

<head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div>
    <button id="create">Create!</button>
  </div>
  <div id="container"></div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

我的目标是在点击#container按钮后在#create内创建方形div。我不介意它现在看起来有多丑，我只想点击按钮添加方块（这不是现在的结果）。我检查了JS Bin和我的浏览器控制台是否有任何错误或错误，但我似乎找不到任何错误。不知道我做错了什么，因为我在按钮上尝试了一个简单的FadeOut函数，它似乎不起作用，所以也许这就是我放入HTML的方式？（我也试过把它放在里面。）

TL; DR

我的代码导致我的click()函数没有在容器中附加任何方格div，这有什么问题？

Answer 1

试试这个我在你的剧本中做了一些改变

＆＃13;

$(document).ready(function(){
var size = 400

function createGrid(size) {
  $("#create").click(function() {
    for (i = 0; i <= size; i++) {
      $("#container").append($('<div class="grid"/>'));
    }
  });
}
    createGrid(size)

  });

＆＃13;

#container {
  top: 10px;
  position: relative;
  width: 960px;
  height: 960px;
  border-color: black;
  margin: auto;
  outline: 2px solid black;
}
.grid {
  display: inline-block;
  border: 1px solid white;
  background-color: black;
  float: left;
  width: 10px;
  height: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<title>
  Sam's Etcha Sketch
</title>

<head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div>
    <button id="create">Create!</button>
  </div>
  <div id="container"></div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

＆＃13;

Answer 2

您永远不会将size传递给createGrid

这是你的代码。

// the outer "size" variable
var size = 400

// this creates a new "size" variable which shadows the outer one
function createGrid(size) {
  $("#create").click(function() {
    for (i = 0; i <= size; i++) {
      $("#container").append('<div class="grid"> </div>');
    }
  });
}

// this passes "createGrid" to the event handler, which calls it without any argument
$(document).ready(createGrid);

以下是如何操作：

// this generates an event handler with a custom "size" in its scope
function getGridCreator(container, size) {
  return function () {
    $("#create").click(function() {
      for (i = 0; i <= size; i++) {
        $(container).append('<div class="grid"> </div>');
      }
    });
  };
}

// this passes the grid creator to the event handler, which again calls 
// it without any argument, but this time "size" is in scope
$(document).ready(getGridCreator("#container", 400));

作为一般性提示：避免使用全局变量，而是使用函数参数和闭包。

jQuery：append（）没有在选择器中插入任何元素

2 个答案: