3

私は次のものを持っています：

 for (var i = 0; i <= 10; i += 1) {

    var $page_button = $('<a>', {
        html : i,
        click : function () {

            var index = i;
            console.log(index);
            return false;
        }
    });

    $page_button.appendTo($wrapper);
}

var indexこれは関数内に含まれているため、ループの反復ごとに個別に定義されると思いました。この場合、出力されるインデックスの値は常に10です。

リンクテキストはiの正しい値です。これは、DOMに書き込まれ、不変であるためです。

これはなぜですか。問題を解決するには何を変更する必要がありますか？

これは他の多くの質問と似ていることを私は知っていますが、この表記法を使用する動作は異なる結果を引き起こしています。私はjQuery1.7.2を使用しています（残念ながら、新しいものは使用できません）。

4

4 に答える 4

4

問題を解決するには、それをクロージャーで囲む必要があります。

var $page_button = $('<a>', {
        html : i,
        click : (function (num) {
           return function(){
               var index = num;
               console.log(index);
               return false;
            }
        })(i)
    });
于 2012-10-26T15:17:08.410 に答える
2

への参照iは、無名関数の一部として閉じられています。注: valueではなく、それ自体への参照iです。関数が実行されると、値が評価されます。関数はループの終了後に実行されるため、値は常に の最後の値になりiます。値だけを渡すには、次のようにします。

    click : (function (index) {
        return function () {
            console.log(index);
            return false;
        };
    })(i)

すぐに実行する無名関数を作成します。この関数は、値を引数として取り、実際の関数を返します。

于 2012-10-26T15:19:17.800 に答える
0

すべてのハンドラーは同じi変数を共有しています。一意のインデックスを参照するには、それぞれに独自の変数スコープが必要です。

 for (var i = 0; i <= 10; i += 1) {
    var $page_button = $('<a>', {
        html : i,
        click : makeHandler(i)  // invoke makeHandler, which returns a function
    });
    $page_button.appendTo($wrapper);
}

function makeHandler(index) {
    return function () {
                console.log(index);
                return false;
           };
}

ここでmakeHandlerは、インデックス引数を受け取り、ハンドラーとして使用される関数を返す関数を作成しました。

関数の呼び出しによって新しい変数スコープが設定され、関数が作成されて内部に返されるためmakeHandler、返される各ハンドラーは独自のスコープインデックス番号を参照します。

于 2012-10-26T15:17:17.653 に答える
0

変数indexは関数の実行ごとに個別に定義されますがi、関数内の変数から値をコピーするためi、関数の作成時ではなく、関数の実行時にの値をそのまま使用します。

変数の値を取得するには、ループ内で実行される関数が必要です。

for (var i = 0; i <= 10; i += 1) {

  (function(){
    var index = i;

    var $page_button = $('<a>', {
      html : i,
      click : function () {
        console.log(index);
        return false;
      }
    });

  })();

  $page_button.appendTo($wrapper);
}
于 2012-10-26T15:18:24.100 に答える