Question

I have written this code:

function(targetSliderObject, images){
        // create thumbs container
        var thumbsContainer = $("<div></div>").addClass(defaultOptions.thumbsContainerClass);
        // add thumbs
        for(i in images)
        {
            thumb = $("<img />").addClass(defaultOptions.thumbItemClass).addClass(i);
            thumb.attr("src", images[i]);
            thumb.click(function(){
                methods.slideNext(targetSliderObject, i);
            });
            thumb.appendTo(thumbsContainer);
        }
        // add thumbs container to container
        targetSliderObject.append(thumbsContainer);
}

What I intend to do is calling method.slideNext() with a different number each time, but insted I get to send a reference to i as parameter for the function which, in the end, is the last index of my array for all my thumbs.

What trick can I use to accomplish what I want ?

Thank you!

Answer 1

“Anchor” the value of i:

(function(i) {
    // code that uses i
})(i);