我的一个javascript代码有点问题。这是代码
//assume array is an array containing strings and myDiv, some div in my doc
for(var i in array) {
var myString = array[i];
var a = document.createElement('a');
a.innerHTML = myString;
a.addEventListener("click", function() {myFunc(myString)}, false);
myDiv.appendChild(a)
}
function myFunc(s) {alert(s);}
但是,由于字符串在 JavaScript 中是通过引用传递的,因此当我单击有问题的链接a
时,我总是看到array
的最后一个字符串。因此,我的问题是"如何按值传递myString
?感谢您的帮助!菲尔
您应该在事件处理程序周围添加一个闭包:
循环内的JavaScript闭包 - 简单的实际示例
a.addEventListener("click", function (s) {
return function () {
alert(s)
};
}(myString), false);
此外,您不应该在数组上使用for...in
循环。
在 Javascript 中,原始变量不是通过引用传递的。
这是经典的"在闭包内调用的循环变量"问题。
以下是该问题的一个常用解决方案:
for (var i = 0, n = array.length; i < n; ++i) {
var myString = array[i];
var a = document.createElement('a');
a.innerHTML = myString;
a.addEventListener("click", make_callback(myString), false);
myDiv.appendChild(a)
}
function make_callback(s) {
return function() {
alert(s);
}
}
请注意,这不是特别节省内存,因为它为数组中的每个元素创建一个新的函数作用域。
更好的解决方案可能是将变量数据存储在元素上(即作为新属性)并在回调中检索它。 实际上,您已经将该字符串存储在 .innerHTML
属性中,因此您可以读取它,然后利用委托在元素的父级上注册一个处理程序:
for (var i = 0, n = array.length; i < n; ++i) {
var a = document.createElement('a');
a.innerHTML = array[i];
myDiv.appendChild(a)
}
myDiv.addEventListener('click', function(ev) {
alert(ev.target.innerHTML);
}, false);
试试这个:我认为使用以下命令迭代数组总是好的。在
for(var i=0; i<array.length;i++) {
var myString = array[i];
var a = document.createElement('a');
a.innerHTML = myString;
a.addEventListener("click", function() {myFunc(myString)}, false);
myDiv.appendChild(a)
}
function myFunc(s) {alert(s);}