1

Javascript / jQueryでリンクをクリックしたときにページのスライドをスクロールさせようとしていますが、forループの現在の増分値をパラメーターとして渡す方法がわかりませんfor。リンク。クリックすると、定義された関数が呼び出されますが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 に答える