关于javascript：Jquery传递变量问题


Jquery passing variable problem

1
2
3
4
5
6
7
8
9
10
    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"没有传递给mouswheel函数，它只将鼠标滚轮添加到数字9(最后一个数字)而不是所有10个元素。
任何人都可以解释如何将变量传递给此函数，以便它保持？

我使用完全jQuery解决方案。

1
2
3
4
5
6
7
8
$("[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();
});

编辑：实际上，我甚至可能试图找出一种方法将实际的匹配控制传递给滑块*函数，但不知道它们实际上做了什么我不知道如何或是否可行。

相关讨论

这在SO上被问了很多(例如)。您需要一个闭包来"捕获"每次迭代中n的值：

1
2
3
4
5
6
7
8
9
10
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);
}

我相信这是javascript中的闭包问题，n实际上是对外部n变量的引用。我相信以下内容应该有效：

1
2
3
4
5
6
7
8
9
10
11
12
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++;
}
相关讨论

代码不起作用的原因是因为在循环期间不评估n变量。

您正在循环中创建一个匿名函数，并传递给mousewheel函数，因此在鼠标滚轮出现之前，不会执行匿名函数中的代码。到那时，n变量的值是10，或者如果你在代码中的任何其他地方使用变量，那么可能是完全不同的东西。

如果您改为使用Function函数从字符串创建函数，则可以将n变量的当前值注入代码：

1
2
3
4
5
6
7
8
9
10
11
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-1)吗？ content-scroll0元素的mousewheel事件是否应该调用sliderup(-1)？

您的n值应该是0-9还是1-10？

如果它是0-9，则将所有n-1表达式更改为n。

如果是1-10，则将for循环更改为var n=1,n<=10;n++，并且所有n-1仅引用n。

另外，删除底部的n++，因为for循环已经增加了n的值。

在这种情况下，JQuery特别允许传递事件数据，这些事件数据可能会或可能不会对您有用：

1
2
3
4
5
6
7
8
9
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
  });
}