我想动态创建一些div。每个div包含一个对象
function node(id, title, content, isPrivate, dateOfCreation) { // my node object
this.id = id;
this.title = title;
this.content = content;
this.isPrivate = isPrivate;
this.dateOfCreation = dateOfCreation;
this.lastEdited = dateOfCreation;
}
此对象由我的数据存储类
管理 var store = new dataStore(); // instance of the store
function dataStore() {
this.nodes = []; // all the node objects
this.getNodes = function() { // get all objects
return this.nodes;
}
this.addNode = function(node) { // add a new object
addElementToArray(this.nodes, node);
}
this.deleteNode = function(node) { // delete an object
deleteElementFromArray(this.nodes, node)
}
this.getNodeById = function(nodeId){ // find an object by its id
for(var i = 0; i < this.nodes.length; i++){
if(nodeId == this.nodes[i].id)
return this.nodes[i];
}
return null;
}
this.getNodeTitle = function(node){ // get the title of the node
return node.title;
}
}
所以我想为每个对象创建一些div，一个div。
function initNodeView() { // build up all the divs
for (var i = 0; i < 30; i++) { // -- TEST -- Fill the store
store.addNode(new node(i, i, i, i % 2 == 0, i));
}
var nodes = store.getNodes(); // get all the nodes from the store
for (var i = 0; i < nodes.length; i++) {
var currentNode = nodes[i]; // the current object
var nodeContainer = createDiv('#nodeList', "nodeContainer"); // the wrapperdiv
createDivWithText(nodeContainer, "nodeContentDiv", store.getNodeTitle(currentNode)); // create a child div with the title of the object
var barContainer = createDiv(nodeContainer, "nodeBtnBarDiv"); // create a childdiv - the container of all buttons
createDivWithIcon(barContainer, "nodeIcon", currentNode.isPrivate ? "'foo.png'" : "'bar.png'"); // create an icon div
var btnDefaultCss = "nodeBtn"; // default css class for buttons
createBtn(barContainer, btnDefaultCss, "Edit", function() {
// empty ..
});
createBtn(barContainer, btnDefaultCss, "Delete", function() {
nodeContainer.remove(); // remove this container from the DOM
store.deleteNode(currentNode); // delete this object from the store
});
}
}
为了重构我的代码，我构建了一些辅助函数。
function createDiv(parent, cssClass){ // create default div
var divElement = $("<div></div>");
divElement.addClass(cssClass);
$(parent).append(divElement);
return divElement;
}
function createDivWithText(parent, cssClass, text){ // create div with text
var divElement = createDiv(parent, cssClass);
divElement.html(text);
return divElement;
}
function createDivWithIcon(parent, cssClass, iconSource){ // create icon div
var divElement = createDiv(parent, cssClass);
var icon = $("<img src='"+ iconSource +"'/>");
divElement.append(icon);
return divElement;
}
function createBtn(parent, cssClass, text, fn){ // create a new button
var btn = $("<button></button>");
btn.addClass(cssClass);
btn.html(text);
btn.click(function() {
fn();
});
$(parent).append(btn);
}
我的问题是，当调用initNodeView（）时，div容器构建得很好。但是当点击一个按钮（编辑或删除）并想要记录该容器的存储对象时，它总是将最后一个对象存储在其中。
因此，当创建30个对象和30个div容器时，它们都将第30个对象存储在其中。
通常div 1应该有对象1，div 2对象2，....
答案 0 :(得分：1)
问题是JavaScript使用了函数作用域的概念。这意味着在函数内声明的每个变量都是函数的本地变量，但不是您可能期望当前的大括号块本地变量。因此，在每次迭代中只有一个变量currentNode被赋予一个新值。但是在事件处理程序中，您引用相同的变量，其最终值是最后一个节点。
for (var i = 0; i < nodes.length; i++) {
var currentNode = nodes[i];
// ...
}
// currentNode == nodes[nodes.length - 1]
有很多方法可以解决这个问题。
您可以将for - 循环的主体包装在匿名函数中并立即调用它，以强制JavaScript为每次迭代创建一个新范围。
for (var i = 0; i < nodes.length; i++) {
(function(currentNode) {
// ...
})(nodes[i]);
}
或者bind currentNode对事件处理程序参数的值。
for (var i = 0; i < nodes.length; i++) {
var currentNode = nodes[i];
// ...
createBtn(barContainer, btnDefaultCss, "Edit", (function(currentNode) {
// empty ..
}).bind(null, currentNode));
}
对于将来的项目，您可以考虑使用let引入的ECMAScript 6关键字。使用let而不是var声明的变量的范围与您期望的一样。
for (let i = 0; i < nodes.length; i++) {
let currentNode = nodes[i];
// ...
}
// currentNode is not defined
根据caniuse.com，JavaScript的这一功能已在几乎所有主流浏览器中实现。但为了保持一致性，您应该避免混合let和var。
答案 1 :(得分：0)
所以我会在这里留下一些工作小提琴，@ just95也很好地回答了这个问题。
第一个是使用单独的函数离开范围：
for(var i = 0; i < 5; i++){
var btn = $("<button></button>");
btn.html(i);
addClickEvent(btn, i);
$('.container').append(btn)
}
function addClickEvent(btn, val){
btn.click(function(){
alert(val);
});
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>
第二种方法是使用关键字＆＃34; let＆＃34;而不是＆＃34; var＆＃34;
for(let i = 0; i < 5; i++){
var btn = $("<button></button>");
btn.html(i);
btn.click(function(){
alert(i);
});
$('.container').append(btn)
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>
并且最后一个可能是最好的（在我看来！）使用jquery函数each。使用原生javascript时，您可以使用forEach()函数
var arr = ["one", "two", "three"];
$(arr).each(function(index, element){
var btn = $("<button></button>");
btn.html(element);
btn.click(function(){
alert(index + 1);
});
$('.container').append(btn)
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>