jQuery：append（）未將任何元素插入選擇器
[英]jQuery: append() isn't inserting any elements into selector
問題描述
首先，這是我的代碼。
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>
我的目標是創建方形的div內#container點擊按鈕后#create 。 我不介意現在看起來多么丑陋，我只想能夠單擊按鈕來添加正方形（到目前為止，結果還不是）。 我檢查了JS Bin和瀏覽器控制台中是否有錯誤或錯誤，但似乎找不到任何錯誤或錯誤。 不知道我在按鈕上嘗試了一個簡單的FadeOut函數時做錯了什么，它似乎沒有起作用，所以也許這是我將其放入HTML的方式嗎？ （我也嘗試將其放入其中。）
TL; DR
我的代碼有什么問題，導致我的click()函數未在容器內附加任何正方形div？
2 個解決方案
解決方案1
1 2015-03-21 14:52:48
試試這個，我在腳本中做了一些更改
$(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>
解決方案2
1 已采納 2015-03-21 14:54:14
您永遠不會將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（）無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.