在此示例中，我创建了三个按钮“一”“二”“三”。单击时我希望他们提醒他们的号码:
<html>
<head>
<script type="application/javascript" src="jquery.js"></script>
<script type="application/javascript">
$(document).ready(function() {
var numbers = ['one', 'two', 'three'];
for (i in numbers) {
var nr = numbers[i];
var li = $('<li>' + nr + '</li>');
li.click(function() {
var newVariable = String(nr);
alert(i); // 2
alert(nr); // three
alert(newVariable); // three
alert(li.html()); // three
});
$('ul').append(li);
}
});
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>
问题是，当单击其中任何一个时，将使用循环变量的最后一个值，即警报框始终显示“三”。
在 JavaScript 中，for 循环内的变量在 C 语言意义上似乎是“静态”的。 是否有某种方法可以为每个点击函数创建单独的变量，即不使用相同的引用？
谢谢!
编辑:
解决方案是使用 jQuery.data将任意数据与每个元素关联:
<html>
<head>
<script type="application/javascript" src="jquery.js"></script>
<script type="application/javascript">
$(document).ready(function() {
var numbers = ['one', 'two', 'three'];
for (i in numbers) {
var nr = numbers[i];
var li = $('<li>' + nr + '</li>');
li.data('nr', nr);
li.click(function() {
alert($(this).data('nr'));
});
$('ul').append(li);
}
});
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>
最佳答案
或者，在 for 循环内放置一个闭包。
$(document).ready(function() {
var numbers = ['one', 'two', 'three'];
for (i in numbers) {
(function () {
var nr = numbers[i];
var li = $('<li>' + nr + '</li>');
li.click(function() {
var newVariable = String(nr);
alert(i); // 2
alert(nr); // three
alert(newVariable); // three
alert(li.html()); // three
});
$('ul').append(li);
}());
}
});
使用 for in 迭代数组也是不好的做法。它应该严格用于迭代对象字段。请改用 for(;;;)。
关于javascript - for 循环中的粘性/静态变量引用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2570763/