1

要素をDOMに挿入し、その後、クリック関数をこれらの要素にバインドします。これは機能しますが、何らかの理由で、作成されたリンクはすべて同じ値を返します。これは、ループ後の「px_amount」の最大値です。非常に奇妙です:)最初のconsole.log（）; は正しい値を返します、そして私はそれが各反復の後に増加するのを見ることができます。簡単にするために、クリック関数に単純なconsole.log（）を追加しました。

for(var i=1; i<=bullet_amount; i++)
{               
    $('<a id="bullet-'+i+'">'+i+' </a>').appendTo('#bullet-nav');

    px_amount = (i-1)*ratio*3450;
    console.log(px_amount);
    $("#bullet-"+i).live('click', function() {
        console.log(px_amount);
    });
}
4

2 に答える 2

5

これは非常に頻繁な問題です。変数iはすべてのコールバックで同じであり、それを囲むスコープの1つです。

一般的な解決策はこれです：

for(var i=1; i<=bullet_amount; i++)
{               
    (function(i){
      $('<a id="bullet-'+i+'">'+i+' </a>').appendTo('#bullet-nav');
      px_amount = (i-1)*ratio*3450;
      console.log(px_amount);
      $("#bullet-"+i).live('click', function() {
         console.log(px_amount);
      });
    })(i);
}
于 2012-11-13T13:51:47.873 に答える
2

参照よりもreatherの値をキャプチャするには、クロージャを使用する必要があります。i

for(var i=1; i<=bullet_amount; i++) {
    (function(iVal) {
        $('<a id="bullet-'+iVal+'">'+iVal+' </a>').appendTo('#bullet-nav');

        var px_amount = (iVal-1)*ratio*3450;
        console.log(px_amount);
        $("#bullet-"+iVal).live('click', function() {
            console.log(px_amount);
        });
    })(i);
}
于 2012-11-13T13:53:10.060 に答える