1

当我单击 Javascript / jQuery 中的链接时，我试图让我的页面幻灯片滚动，但我无法弄清楚如何将for循环的当前增量值作为参数传递，以for绑定我的点击事件链接。当我单击时，它会调用我定义的函数，但使用 my 的当前值i，而不是定义函数时的值......这是我的一些代码：

temp[0] = 0;
for(var i = 1; i < 8; i++) {
  temp[i] = defaultPositions["slide" + i].top;
  console.log(defaultPositions["slide" + i].top);
  $('a.slide' + i).bind('click', function() {
    $('html, body').animate({scrollTop:(defaultPositions['slide' + i].top / slidesScrollSpeed)}, 1000, function() {
      parallaxScroll();
    });
    return false;
  });
}

如何传递i值，以便当我单击链接时，每个链接都具有预期值而不是全部存在slide8？

4

1 回答 1

4

概括：

for (var i=1;i<8;++i){
  (function(i){
    // Your code using `i` in callbacks here
  })(i);
}

您的问题是所有闭包之间共享一个变量i（为处理程序创建的匿名函数click，所有“关闭”在i函数外部声明的值），因此当该变量的值增加时循环中的所有函数仍然引用相同的更新值。

通过将循环体包装在一个传入 值的函数中，每次迭代i都会获得一个新的、不同的变量i，以便函数结束。为了更清楚发生了什么，您也可以将其写为：

for (var i=1;i<8;++i){
  (function(slideNum){
    // Your code using `slideNum` in callbacks here
  })(i);
}

或者，您可以为闭包创建一个自定义变量，如下所示：

for (var i=1;i<8;i++){
  var slideNum = 'slide'+i; // Create a new variable to use in the closure
  temp[i] = defaultPositions[slideNum].top;
  $('a.slide'+i).bind('click', function() {
    $('html, body').animate({
      scrollTop:(defaultPositions[slideNum].top/slidesScrollSpeed)
    }, 1000, function() { parallaxScroll(); });
    return false;
  });
}

另外，请注意 - 根据实现parallaxScroll()- 您可能可以将该行简化为：

$('html, body').animate({
  scrollTop:(defaultPositions[slideNum].top/slidesScrollSpeed)
}, 1000, parallaxScroll );
于 2012-08-03T17:05:36.283 回答