Question

I’m thinking there’s some basic stuff that I’m missing here;

for (var i=1; i<=5; i++) {
  var o = $('#asd'+i);

  o.mouseover(function() {
    console.info(i);
  });
}

When hovering over the five different elements, I always get out the last value from iteration; the value 5. What I want is different values depending of which element I’m hovering, all from 1 to 5.

What am I doing wrong here?

Answer 1

You need a closure, as all of the mouseover functions are referencing the same variable whose value is changing:

for (var i=1; i<=5; i++) {
    (function(j) {
        $('#asd'+j).mouseover(function() {
            console.info(j);
        });
    })(i);
}

By creating a closure, the variable j is inside the local scope of the function and will not change when the “outer” i changes.