Can't use variable inside of click event?

Question

I have this code and it's javaScript and jQuery:

for (thisLooper = 1; thisLooper < 4; thisLooper++) {

    if ($("#writeComments"+thisLooper).length > 0) {
        $("#writeComments"+thisLooper+",#comments"+thisLooper+", #infoSpan"+thisLooper+"").hide();
        $("#toggleCommentForm"+thisLooper).click(function () {
            $("#writeComments+thisLooper").slideToggle();
        });
    }

}

What it does:

Check if #writeComments1 exists
If it exists, hide #writeComments1, #comments1 and #infoSpan1
Then, if someone clicks on #toggleCommentForm1, slideToggle #writeComments1
Do all this for #writeComments2 and it's friends
Do all this for #writeComments3 and it's friends

With the code above nothing happens but if i replace:

$("#toggleCommentForm"+thisLooper).click(function () {
    $("#writeComments+thisLooper").slideToggle();
});

width this:

$("#toggleCommentForm"+thisLooper).click(function () {
    $("#writeComments1").slideToggle();
});

It all works but naturally only #writeComments1 slideToggles even if I click on #toggleCommentForm2 for instance.

My question is, why cant I use the variable "thisLooper" inside of the click events?

`$("#writeComments+thisLooper").slideToggle();` should be `$("#writeComments"+thisLooper).slideToggle();`? — Stu, Feb 25 '15 at 14:35
^^ you are not using it as a variable. But you could, if you would... ;) — mondjunge, Feb 25 '15 at 14:36
A closure in the loop will fix it, so that the index value is retained in the callback. — iCollect.it Ltd, Feb 25 '15 at 14:37
The "thisLooper" variable should be concatenated with the string ("#writeComments"+thisLooper). However, He would had another problem with closures. — Oday Fraiwan, Feb 25 '15 at 14:37
Sorry, had some typos below with the braces (corrected now) :) — iCollect.it Ltd, Feb 25 '15 at 14:44

iCollect.it Ltd · Accepted Answer · 2015-02-25T14:44:32.347

A closure in the loop will fix the immediate problem (and put the variable outside the string of course), so that the index value is retained in the click callback function.

for (index = 1; index < 4; index++) {
    (function(thisLooper){
        if ($("#writeComments"+thisLooper).length > 0) {
            $("#writeComments"+thisLooper+",#comments"+thisLooper+", #infoSpan"+thisLooper+"").hide();
            $("#toggleCommentForm"+thisLooper).click(function () {
                $("#writeComments"+thisLooper).slideToggle();
            });
        }
    })(index);

}

You should also create a local var rather than keep re-querying the selection but I need to see your full HTML first (as the code is a little odd)

score 0 · Answer 2 · answered Feb 25 '15 at 14:48

The problem is that your loop variable is not properly closed over; instead of using a closure to fix that problem (which is what TrueBlueAussie explains in his answer), you could also consider binding the click handler to the element you wish to perform the slide on:

$("#toggleCommentForm"+thisLooper).click($.proxy(function () {
     // this is a jQuery object
     this.slideToggle();
}, $("#writeComments"+thisLooper));

Note, though, that anything more complex than just operating on a single jQuery object is better solved by a closure.

Can't use variable inside of click event?

2 Answers2