jquery and javascript's closure

Question

I am having the code below and javascript's closure together with anonymous functions are giving me a headache.

for (var i = 0, len = sites.length ; i < len ; i++)
{
  $("#thumb"+i).click(function() { $("#shader").show(); $("#thumbInfo"+i).show(); alert("#thumbInfo"+i); });
  $("#thumbInfo"+i+" .xbutton").click(function() { $("#shader").hide(); $("#thumbInfo"+i).hide(); });
}

Due to closure, i is always 5 (the sites array has 5 elements), so all the click handlers refer to the same id.

Any workaround?

IF you unroll the loop (replace it five times with i hardcoded) does it work? I have a feeling i is not the problem. — Abdullah Jibaly
– Abdullah Jibaly, Commented May 1, 2011 at 4:09

alex · Accepted Answer · 2011-05-01 04:03:21Z

6

You could always loop with jQuery's each().

$.each(sites, function(i) {
  $("#thumb"+i).click(function() { $("#shader").show(); $("#thumbInfo"+i).show(); alert("#thumbInfo"+i); });
  $("#thumbInfo"+i+" .xbutton").click(function() { $("#shader").hide(); $("#thumbInfo"+i).hide(); });
});

answered May 1, 2011 at 4:03

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

otakustay · Accepted Answer · 2011-05-01 04:04:05Z

3

use a closure in your for iteration:

for (var i = 0, len = sites.length ; i < len ; i++)
{
    (function(i) {
        $("#thumb"+i).click(function() {
            $("#shader").show(); 
            $("#thumbInfo"+i).show(); 
            alert("#thumbInfo"+i); 
        });
        $("#thumbInfo"+i+" .xbutton").click(function() { 
            $("#shader").hide(); 
            $("#thumbInfo"+i).hide(); 
        });
    }(i));
}

answered May 1, 2011 at 4:04

otakustay

12.6k6 gold badges41 silver badges45 bronze badges

Comments

user663031 · Accepted Answer · 2011-05-01 05:33:32Z

Place a function returning a function and parameterized by i outside the loop. JSLint will encourage you to do this anyway, and some might find it more readable to boot.

function make_fn1(i) {
    return function() { $("#shader").show(); $("#thumbInfo"+i).show(); };
}
function make_fn2(i) {
    return function() { $("#shader").hide(); $("#thumbInfo"+i).hide(); };
}
for (var i = 0; i < sites.length ; i++)
{
    $("#thumb"+i).click(make_fn1(i));
    $("#thumbInfo"+i+" .xbutton").click(make_fn2(i));
}

However, this could be cleaned up in other ways. For starters, as long as you're using jQuery, $("#shader, #thumbInfo"+i).show(); is more concise. Furthermore, in the current code the notion that the two functions either hide or show the same two elements is not factored out, so could be

function make_fn (i,showhide) {
    return function() { $("#shader, #thumbInfo"+i)[showhide]() };
}
for (var i = 0; i < sites.length ; i++)
{
    $("#thumb"+i).click(make_fn(i,'show'));
    $("#thumbInfo"+i+" .xbutton").click(make_fn(i,'hide'));
}

Ibu · Accepted Answer · 2011-05-01 04:03:39Z

-1

var len = sites.length ;
for (var i = 0; i < len ; i++)
    {
      $("#thumb"+i).click(function() { $("#shader").show(); $("#thumbInfo"+i).show(); alert("#thumbInfo"+i); });
      $("#thumbInfo"+i+" .xbutton").click(function() { $("#shader").hide(); $("#thumbInfo"+i).hide(); });
    }

you might have been assigning 5 to i;

answered May 1, 2011 at 4:03

Ibu

44k14 gold badges82 silver badges109 bronze badges

2 Comments

alex Over a year ago

No, the closure gives access to the parent's variable i, which by the time the click() event is called, has beens set to 5.

Ibu Over a year ago

I can certify that this answer is incorrect. I will leave it here for reference.

Collectives™ on Stack Overflow

jquery and javascript's closure

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related