jQuery:append(）不是't在选择器中插入任何元素

jQuery: append() isn't inserting any elements into selector

本文关键字：选择器 插入 元素 任何 append 不是 jQuery      更新时间：2023-09-26

首先，这是我的代码。

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>

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

TL；博士

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

您永远不会将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));

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

试试这个，我在你的脚本中做了一些更改

$(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)
  });
#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;
}
<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>

相关文章：