gpt4 book ai didi

javascript - 为什么这两位 JavaScript 不等价?

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:55:56 26 4
gpt4 key购买 nike

在 jquery 1.4.2、ff 3.6.6 中:

以下代码生成三个 div,它们将消息写入 firebug 控制台,正如您所期望的那样。但是,如果您取消注释循环并手动注释掉 3 行,则它不起作用 - 将鼠标悬停在任何 div 上会导致 "three" 被写入控制台。

为什么这两种方法彼此不同?在每一个中,您都使用选择器来查找元素并向其添加事件。

<head>
<script type="text/javascript" src="/media/js/jquery.js"></script>
<script>

$( document ).ready( function() {

$("#one").mouseenter(function(){console.log("one")})
$("#two").mouseenter(function(){console.log("two")})
$("#three").mouseenter(function(){console.log("three")})

// names=['one','two','three'];
// for (k in names){
// id=names[k]
// $("#"+id).mouseenter(function(){console.log(id)})
// }
})
</script>
</head>

<body>
<span id="one">ONE</span>
<p><span id="two">TWO</span></p>
<p><span id="three">THREE</span></p>
</body>

最佳答案

你会得到 a very common closure problemfor in 循环中。

包含在闭包中的变量共享相同的单一环境,因此在 mouseenter 回调被调用时,循环将运行它的过程并且 id 变量将指向 names 数组的最后一个元素的值。

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

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

function makeMouseEnterCallback (id) {  
return function() {
console.log(id);
};
}

// ...

var id, k,
names = ['one','two','three'];

for (k = 0; k < names.length; k++) {
id = names[k];
$("#" + id).mouseenter(makeMouseEnterCallback(id));
}

您还可以按如下方式内联上述函数工厂:

var id, k, 
names = ['one','two','three'];

for (k = 0; k < names.length; k++) {
id = names[k];
$("#" + id).mouseenter((function (p_id) {
return function() {
console.log(p_id);
};
})(id));
}

任何其他解决方案都可以是 @d.m suggested in another answer , 将每个迭代包含在它自己的范围内:

var k, 
names = ['one','two','three'];

for (k = 0; k < names.length; k++) {
(function() {
var id = names[k];
$("#" + id).mouseenter(function () { console.log(id) });
})();
}

虽然与此问题无关,但通常建议避免使用 for in 循环来迭代数组的项目,如 @CMS在下面的评论中指出(Further reading)。此外,用分号显式终止语句也被认为是 JavaScript 中的一种好习惯。

关于javascript - 为什么这两位 JavaScript 不等价?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3287500/

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