首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >JavaScript单击处理程序在for循环中未按预期工作

JavaScript单击处理程序在for循环中未按预期工作
EN

Stack Overflow用户
提问于 2013-05-16 22:13:39
回答 3查看 5K关注 0票数 256

我正在尝试学习JS,但遇到了一个问题。

我尝试了很多东西,用谷歌搜索,但都是徒劳的。下面的一段代码不能像预期的那样工作。我应该在点击时得到i的值,但它总是返回6。我在胡思乱想,请帮帮忙。

代码语言:javascript
复制
for (var i = 1; i < 6; i++) {

    console.log(i);

    $("#div" + i).click(
        function() {
            alert(i);
        }
    );
}
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-05-16 22:15:09

Working DEMO

这是一个典型的JavaScript闭包问题。对i对象的引用存储在单击处理程序闭包中,而不是i的实际值中。

每个单击处理程序都会引用同一个对象,因为只有一个计数器对象可以容纳6个,所以每次单击都会得到6个。

解决方法是将其封装在匿名函数中,并将i作为参数传递。基元通过函数调用中的值进行复制。

代码语言:javascript
复制
for(var i=1; i<6; i++) {
     (function (i) {
        $("#div" + i).click(
            function () { alert(i); }
        );
     })(i);
}

更新

Updated DEMO

或者,您可以使用'let'而不是var来声明ilet每次都会给你新的绑定。它只能在ECMAScript 6 strict mode中使用。

代码语言:javascript
复制
'use strict';

for(let i=1; i<6; i++) {

        $("#div" + i).click(
            function () { alert(i); }
        );
 }
票数 152
EN

Stack Overflow用户

发布于 2013-05-16 22:17:47

问题是,当您遍历循环时,i会递增。当你说alert(i)的时候,你是在让javascript告诉你点击链接时i的值是是什么,的值是6。

如果你想获取盒子里的内容,你可以这样做:

代码语言:javascript
复制
for (var i = 1; i < 6; i++) {

    console.log(i);

    $("#div" + i).click(function(e) {
        alert($(this).text());
    });
}

工作示例:http://jsfiddle.net/rmXcF/2/

票数 39
EN

Stack Overflow用户

发布于 2013-05-16 22:15:56

代码语言:javascript
复制
$("#div" + i).click(
    function() {
        alert(i);
    }
);

这是因为它使用i的值作为闭包。i是通过一个闭包来记住的,这个闭包在foor循环的每个阶段都会增加。

代码语言:javascript
复制
$("#div" + i).click(function(event) {
    alert($(event.target).attr("id").replace(/div/g, ""));
});
票数 18
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16589806

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档