Question

I have following code

for (var i = 0; i < that.$el.mini.length; i++) {
            var pag = that.$el.mini[i].pagination;
            // Mini-Slider Pagination
            $('li', pag).each( function(j, el) {
                $(el).click( function() {
                    /*
                     * Toggle Mini-Slide
                     */
                    that.slider_fn.mini.show(i, j);
                    return false;
                });
            });
        }

So, basically, what I want to do is run this function that.slider_fn.mini.show(i, j); when the element is clicked.

The problem is that I want to use the variable i, which changes its value in the loop. When the element is clicked, i is valued as the latest number, that is that.$el.mini.length.

How can I make JavaScript (or a function) to memorize that particular number?

Answer 1

Use a closure to close over the value of i:

$(el).click( (function(i_){
  return function() {
     that.slider_fn.mini.show(i_, j);
     return false;
  };
})(i));

Beforehand, your function was referencing the variable called i, now on each iteration you create a new function that references i_, and this variable is unique to each function and references the value of i when the function was created.