javascript - jQuery 仅保存在事件中的最后一个值

Question

我是 jQuery 新手，并试图了解下面的代码中发生了什么。

var data = {1, 2, 3, 4};
for (var key in data) {
    $("#id"+key).click(function() {
        $(".class"+key).hide();
    });
}

当我运行此代码时，无论我单击哪个 id，它都会隐藏 class4。为什么会出现这种行为？

另外，如何让 id1 隐藏 class1、id2 隐藏 class2 等等？

谢谢

Answer 1

工作演示

var data = [1, 2, 3, 4];
for (var i = 0;i < data.length; i++) {    
    (function(key) {    
        $("#id"+key).click(function() {
            $(".class"+key).hide();
        });
    })(data[i])
}​

在您的 for each 循环中，闭包是由处理程序单击创建的，但它指向key哪个在全局范围内。它被改变了。在我的代码中，关键点指向由附加函数包装创建的范围，.click并key在其中指向key由该函数创建的范围，每次它都是新的

var data = {1, 2, 3, 4};- 这不是有效的对象定义。它应该是这样的： var data = {key:"value", key2:"value",...};上面的示例也适用于正确指定的对象。只是不要忘记您还应该key像这样测试变量： if(data.hasOwnProperty(key)) {...}为了过滤掉.toString等.valueOf（默认对象方法）

或者像一种解决方法 - 您始终可以key从单击的元素 ID 构建类名。

$("#id"+key).click(function() {
    var className = ".class" + $(this).prop("id").replace("id", "");
    $(className).hide();
});

并且不需要关闭。

Answer 2

尝试这个

var data = { 1: 1, 2: 2, 3: 3, 4: 4 };
for (var key in data) {
   $("#id" + key).click(function () {
           $(".class" + this.id.substr(this.id.toString().length - 1, 1)).hide();
     });
}

其实问题是

1. var data = {1, 2, 3, 4};肯定是无效的。
2. $(".class"+key)在运行时对事件进行评估，click并且当时key持有4它是分配给它的最后一个值，所以它是错误的。id因此，您应该在运行时从点击器本身获取该数值。