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

Working demo

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 for for循环中，闭包是由处理程序单击创建的，但它指向全局范围内的key。它改变了。在我的代码中，关键点指向由其他函数包装.click和key创建的范围，在该函数创建的范围内指向key，每次都是新的

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

或者像解决方法一样 - 您始终可以key从clicked元素构建类名 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();
     });
}

实际上存在问题

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

jQuery只保存在事件中的最后一个值

2 个答案: