Jquery passing variable problem

Question

    for(var n=0;n<10;n++)
    {
            $('#content-scroll'+n).mousewheel(function(event, delta) {
  if (delta > 0) sliderUp(n-1);
  else if (delta < 0) sliderDown(n-1);
  return false; // prevent default
 });

 n++;
}

I have a problem with this code, variable "n" is not passed right to the mouswheel function which will add mousewheel only to number 9 (last number) and not to all 10 elements. Can anyone explain how to pass a variable to this function so that it stays?

Answer 1

I believe this is an issue of closures in javascript, the n is actually a reference to the outside n variable. I believe the following should work instead:

for(var n=0;n<10;n++)
{
  var localN = n;
  $('#content-scroll'+n).mousewheel(function(event, delta) {
    if (delta > 0) sliderUp(localN-1);
    else if (delta < 0) sliderDown(localN-1);
    return false; // prevent default
  });

  //is this really needed??
  //n++;
}

Answer 2

Are your n values supposed to go from 0-9 or 1-10?

If it's 0-9, change all n-1 expressions to just n.

If it's 1-10, change the for loop to var n=1,n<=10;n++, and all n-1 references to just n.

Also, remove the n++ on the bottom because your for loop already increments the value of n.

Answer 3

My take on this using a fully jQuery solution.

$("[id^='content-scroll']").mousewheel( function(event,delta) {
     var n = this.id.replace(/content-scroll/,'');
     if (delta > 0)
        sliderUp(n);
     else if (delta < 0)
        sliderDown(n);
     event.preventDefault();
});

EDIT: Actually, I may even try to figure out a way to pass the actual matching control to the slider* functions, but not knowing what they actually do I have no idea how or if that would work.

Answer 4

The reason that the code doesn't work is because the n variable is not evaluated during the loop.

You are creating an anonymous function in the loop that you pass to the mousewheel function, so the code in the anonymous function isn't executed until the mouse wheel even occurs. By then the value of the n variable is 10, or perhaps something completely different if you are using the variable anywhere else in the code.

If you instead use the Function function to create the function from a string, you can inject the current value of the n variable into the code:

for(var n=0; n<10; n++) {

   $('#content-scroll' + n).mousewheel(
      Function('event', 'delta',
         'if (delta > 0) sliderUp(' + (n-1) + ');' +
         'else if (delta < 0) sliderDown(' + (n-1) + ');' +
         'return false; // prevent default'
      )
   );

}

However, should it be (n-1)? Should the mousewheel event for the content-scroll0 element call sliderup(-1)?

Answer 5

This is asked a lot on SO (case in point). You need a closure to "trap" the value of n in each iteration:

for(var n=0;n<10;n++)
{
    (function(n){
        $('#content-scroll'+n).mousewheel(function(event, delta) {
            if (delta > 0) sliderUp(n-1);
            else if (delta < 0) sliderDown(n-1);
            return false; // prevent default
        });
    })(n);
}

Answer 6

JQuery specifically allows the passing of event data, which may, or may not, be of use to you in this case:

for(var n=0;n<10;n++)
{
  $('#content-scroll'+n).bind('mousewheel', {index:n}, function(event, delta) {
    var innerN = event.data.index;
    if (delta > 0) sliderUp(innerN-1);
    else if (delta < 0) sliderDown(innerN-1);
    return false; // prevent default
  });
}