如何给鼠标滚轮事件传递参数？

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

我对这段代码有一个问题，变量"n“没有直接传递给鼠标滚轮函数，它只会将鼠标滚轮添加到数字9(最后一个数字)，而不是所有的10个元素。谁能解释一下如何将一个变量传递给这个函数，使其保持不变？

Answer 1

我使用一个完全的jQuery解决方案来解决这个问题。

$("[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();
});

slider：实际上，我甚至可能会尝试找出一种方法来将实际的匹配控件传递给slider*函数，但不知道它们实际做了什么，我不知道这是如何工作的，或者是否会工作。

Answer 2

我认为这是javascript中的闭包问题，n实际上是对外部n变量的引用。我相信下面的方法应该是可行的：

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 3

这个问题在SO (case in point)上被问得很多。您需要一个闭包来在每次迭代中“捕获”n的值：

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