gpt4 book ai didi

javascript - Javascript 中的事件处理程序作用域

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:05:14 25 4
gpt4 key购买 nike

这可能是一个简单的问题,但我想不出最佳答案。

我有 10 个 <div>屏幕上的元素。他们每个人都有一个 click()事件监听器:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="element0">Click me! (0)</div>
<div id="element1">Click me! (1)</div>
<div id="element2">Click me! (2)</div>
<div id="element3">Click me! (3)</div>
<div id="element4">Click me! (4)</div>
<div id="element5">Click me! (5)</div>
<div id="element6">Click me! (6)</div>
<div id="element7">Click me! (7)</div>
<div id="element8">Click me! (8)</div>
<div id="element9">Click me! (9)</div>
<script type="text/javascript">
for ( var i = 0; i < 10; i++ ) {
var element = document.getElementById( "element" + i );
element.onclick = function () {
alert( "Element " + i );
}
}
</script>
</body>
</html>

但每次我点击一个元素时,它都会显示“元素 10”!似乎所有这些事件处理程序都使用相同的值 i .

我希望它显示“元素 N”,其中 N 是当前元素的编号。我不想从元素 id 中提取 N。我也不想使用 data() 存储它jQuery 的方法。我相信这个问题一定有更简单的解决方案,但我找不到。有人吗?

最佳答案

在所有点击处理程序共享的外部作用域中,您只有一个变量 i。您需要为每个闭包创建一个局部变量 i。这将起作用:

for ( var i = 0; i < 10; i++ ) {
var element = document.getElementById( "element" + i );
element.onclick = (function(i){
// returns a new function to be used as an onclick handler
return function () {
alert( "Element " + i );
}
})(i); // Pass in the value of the outer scope i
}

检查 this article 中的“The Infamous Loop”问题(并阅读整篇文章)以获取更多信息:)

关于javascript - Javascript 中的事件处理程序作用域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10656382/

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