0

グリッドを含む JavaScript と PHP で建物ゲームを作成しています。グリッド内の各正方形は、独自の onmouseover および onmousedown 関数を持つ div です。

for(x=0; x < width; x++)
{
    for(y=0; y < height; y++)
    {
        var div = document.createElement("div");
        //...
        div.onmouseclick = function() {blockClick(x, y)}
        div.onmouseover = function() {blockMouseover(x, y)}
        game.appendChild(div);
    }
}

しかし、すべての正方形は、追加された最後の正方形の x と y を持っているようです。なぜこれが起こっているのか、なんとなくわかります-変​​数を複製するのではなく、xとyへのポインターを作成しています-しかし、どうすれば修正できますか? 私も試してみました

for(x=0; x < width; x++)
{
    for(y=0; y < height; y++)
    {
        var div = document.createElement("div");
        var myX = x;
        var myY = y;
        div.onmouseclick = function() {blockClick(myX, myY)}
        div.onmouseover = function() {blockMouseover(myX, myY)}
        game.appendChild(div);
    }
}

同じ結果で。

私はdiv.setAttribute("onmouseover", ...)Firefox で動作するものを使用していましたが、IE では動作しませんでした。ありがとう！

4

2 に答える 2

1

と の値を保持するには、クロージャを作成する必要がありxますy。これでうまくいくはずです：

for(var x=0; x < width; x++) {
  for(var y=0; y < height; y++) {
    var div = document.createElement("div");
    (function(x,y){
       div.onmouseclick = function() {blockClick(x, y)}
       div.onmouseover = function() {blockMouseover(x, y)}
    })(x,y);
    game.appendChild(div);
  }
}

これを行うよりクリーンな方法は、関数を定義して div を作成し、各反復で呼び出すことです。

var createDiv = function(x,y){
  var div = document.createElement("div");
  div.onmouseclick = function() {blockClick(x, y)};
  div.onmouseover = function() {blockMouseover(x, y)};
  return div;
}

for(var x=0; x < width; x++) {
  for(var y=0; y < height; y++) {
    game.appendChild(createDiv(x,y));
  }
}
于 2010-05-15T16:03:37.057 に答える
0

これは、周囲のクロージャーのために、実際には各ハンドラーで同じ変数を共有しているためです。したがって、次のようなローカル クロージャを作成する必要があります。

(function(x,y){
    div.onmouseclick = function() {blockClick(x, y)};
    div.onmouseover = function() {blockMouseover(x, y)};
})(x, y);
于 2010-05-15T15:57:41.197 に答える