Question

I’m new to jQuery and trying to understand what is happening in the code below:

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

When I run this code, it will hide class4 no matter which id I click. Why is this behaviour the case?

Also, how do I make id1 hide class1, id2 hide class2, and so on?

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])
}​

In your for each loop closure is created by handler click, but it points to key which is in global scope. And it is changed. In my code key points to scope created by additional function wrapping .click and key in it points to key in scope created by that function, each time it is new

var data = {1, 2, 3, 4}; – this is not valid object definition. It should be like this:
var data = {key:"value", key2:"value",...}; Example above will also work with correctly specified object. Just do not forget that you should also test key variable like this:
if(data.hasOwnProperty(key)) {...} in order to filter out .toString, .valueOf etc (default object methods)

Or like a workaround – you always can get key to build a class name from clicked element
ID.

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

And no closure needed.