Question

I looked at the post jQuery: Loop iterating through numbered selectors? and it didn’t solve my problem, and didn’t look like it was truly an answer that works.

I have a list of <h3> tags that are titles to questions, and there are answers below in a <p>. I created classes for each Q & A like so:

<h3 class="sec1">Question:</h3><p class="view1">Answer...</p>
<h3 class="sec2">Question:</h3><p class="view2">Answer...</p>
<h3 class="sec3">Question:</h3><p class="view3">Answer...</p>

I used the following jQuery loop to reduce redundacy for my 21 questions.

$(document).ready(function () {
    for (var i = 1; i < 21; i++) {
        var link = ".sec" + i;
        var content = ".view" + i;

        $(link).click(function () {
            $(content).toggle("fast");
        });
    }
});

But it isn’t working for all Q & A sets, only the last one. i.e.: It works for the first set if I set the max value to 2 (only looping once). Please advise. Thanks

Answer 1

While I agree with @gaffleck that you should change your approach, I think it is worth while to explain how to fix the current approach.

The problem is that the click function does not get a copy of the content variable but instead has a reference to that same variable. At the end of the loop, the value is .view20. When any element is clicked it read that variable and gets back .view20.

The easiest way to solve this is to move the code into a separate function. The content variable within this function is a new variable for every call of the function.

function doIt(i){
    var link = ".sec" + i;
    var content = ".view" + i;

    $(link).click(function () {
        alert(content);
    });
}

$(document).ready(function () {
    for (var i = 1; i < 21; i++) {
        doIt(i);    
    }
});

http://jsfiddle.net/TcaUg/2/

Notice in the fiddle, if you click on a question the alert has the proper number. Optionally, you could make the function inline, though I find the separate function in most cases to be a bit cleaner.

http://jsfiddle.net/TcaUg/1/