CODEWITHSUNDEEP
javascriptjquery
dfilkovi
dfilkovi

Reputation:

How to pass parameter to mousewheel event?

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?

Upvotes: 1

Views: 1630

Answers (6)

Jason
Jason

Reputation: 2331

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
  });
}

Upvotes: 0

JPot
JPot

Reputation: 4215

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);
}

Upvotes: 2

Guffa
Guffa

Reputation: 700382

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)?

Upvotes: 1

tvanfosson
tvanfosson

Reputation: 532505

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.

Upvotes: 3

John Rasch
John Rasch

Reputation: 63445

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.

Upvotes: 1

Jeremy Stanley
Jeremy Stanley

Reputation: 5926

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++;
}

Upvotes: 2

Related Questions