gpt4 book ai didi

javascript - MooTools/JavaScript 变量范围

转载 作者:行者123 更新时间:2023-11-30 23:45:54 24 4
gpt4 key购买 nike

我试图使每个显示的数字都可点击。 “1”应该 alert() 80,“2”应该产生 60,等等。

但是,当调用 alert(adjust) 时,它只显示 0,而不是正确的数字。但是,如果注释掉的 alert(adjust) 未注释,它会在页面加载时生成正确的数字,但不会在单击时生成正确的数字。

我想知道为什么addEvents中的代码无法访问之前定义的变量adjust

<html>
<head>
<script type="text/javascript" charset="utf-8" src="mootools.js"></script>
<script type="text/javascript" charset="utf-8">
window.addEvent('domready', function() {

var id_numbers = [1,2,3,4,5];

for(var i = 0; i<id_numbers.length; i++) {
var adjust = (20 * (5 - id_numbers[i]));
// alert(adjust);
$('i_' + id_numbers[i]).addEvents({
'click': function() {
alert(adjust);
}
});
}

});
</script>
</head>
<body>

<div id="i_1">1</div>
<div id="i_2">2</div>
<div id="i_3">3</div>
<div id="i_4">4</div>
<div id="i_5">5</div>

</body>
</html>

谢谢。

最佳答案

您正在拥有 a very common closure problem在那个 for 循环中。

闭包中包含的变量共享相同的单一环境,因此当调用 click 回调时,for 循环将运行其进程,并且 adjust 变量将指向最后分配的值。

您可以使用函数工厂通过更多闭包来解决此问题:

function makeClickHandler(adjust) {  
return function() {
alert(adjust);
};
}

// ...

for(var i = 0; i<id_numbers.length; i++) {
var adjust = (20 * (5 - id_numbers[i]));

$('i_' + id_numbers[i]).addEvents({
'click': makeClickHandler(adjust)
});
}

如果您不熟悉闭包的工作原理,这可能是一个相当棘手的话题。您可以查看以下 Mozilla 文章以获取简要介绍:

关于javascript - MooTools/JavaScript 变量范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3030845/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com