1

便宜上、私のコードのインタラクティブな jsfiddle バージョンを次に示します。 問題のあるコードは次のとおりです。

for i in [1, 2, 3, 4, 5, 6, 7, 8]
  console.log "cell #{i} was created!"
  cell = $('<div class="inventory-cell"></div>').mousedown (event) ->
    alert "#{i} was clicked!"
  $("#inventory-grid").append(cell)

そして、これがhtmlです：

<div id="inventory-dialog" class="dialog">    
    <div id="inventory-grid"></div>    
</div>

これがどのように機能するかです。これにより、ループ内に一連のセルが生成されます。最初のものをクリックすると、「1 がクリックされました!」というアラートが表示されます。最後をクリックすると、「8 がクリックされました!」と表示されます。しかし、何らかの理由で、クリックするたびに「8がクリックされました」と表示されます。なぜこうなった？

4

5 に答える 5

4

すべてのコールバックは、それらのコールバックのいずれかが呼び出されるまでにi値を持つ、本体内の同じ変数を参照します。8

コールバックが作成された時点での値を保持する、特定のコールバックごとにローカルな変数を作成する必要があります。i

(function(j) {
    var cell = $('<div class="inventory-cell"></div>').mousedown(function(event) {
        alert("#{j} was clicked!");
    });

    $("#inventory-grid").append(cell);
})(i);

機能的に同等の CoffeeScript は次のようになります。

do (i) ->
  cell = $('<div class="inventory-cell"></div>').mousedown (event) ->
    alert "#{i} was clicked!"

  $("#inventory-grid").append(cell)

唯一の違いは、新しい変数を作成する代わりにdoシャドウすることですが、結果は同じです。i

正確な翻訳は次のようになります。

do (j = i) ->
  cell = $('<div class="inventory-cell"></div>').mousedown (event) ->
    alert "#{j} was clicked!"

  $("#inventory-grid").append(cell)
于 2013-08-16T03:27:28.690 に答える
2 
for i in [1, 2, 3, 4, 5, 6, 7, 8]
    do (i) ->
        console.log "cell #{i} was created!"
        cell = $('<div class="inventory-cell"></div>').mousedown (event) ->
            alert "#{i} was clicked!"
        $("#inventory-grid").append(cell)

フィドル。

于 2013-08-16T03:28:45.213 に答える
0

(function(){...})();coffeescriptについて知らない...そして、fsfiddleでエラーが発生する理由がわからない..

for(var i=1; i<9;i++){
console.log("cell "+ i + "was created!")
~function(i){
    var cell = $('<div class="inventory-cell"></div>').mousedown(function(){
    alert(i+" was clicked!")
    });
  $("#inventory-grid").append(cell)
}(i);
}
于 2013-08-16T04:05:46.220 に答える