點擊時直接更新DIV內容而無需直接瞭解其編號

Question

我正在構建2D瓦片遊戲地圖。每個圖塊都是2D數組中的一個div（var tiles = []）。下面是其中生成基於所定義的其他地方的一些參數的圖塊的功能：

function Tile(rnd, px, py, nid) { 
var self = this; 
var _types = ["grass","forest","hills","swamp","forest", "mountains"]; 

var height = 60; 
var width = 60; 
var tileID = nid // new numeric tile id 

var id = "tile_"+px+py+rnd; // old tile ID 
var x = px; 
var y = py; 

var type = _types[rnd]; 
var img = 'img/maptiles/'+type+'.png'; 

this.Draw = function() { 
    var div = $("<div class='tile'></div>"); 
    div.attr('id',tileID).data('type',type).data('x',x).data('y',y); 
    div.get(0).tile = self; 
    div.css({top:height*y, left:width*x}); 
    div.css({"background":"url('"+img+"')"}); 
    div.appendTo('#map-content'); 
}; 


this.Alert = function() { 
    alert("Tile type: "+type+". Tile ID: "+tileID+" "); 
}; 

this.Move = function(){ // moves player to available tile, in this case if player stands to a tile before the clicked one 
    alert("start move! Tile type: "+type+". Tile ID: "+tileID+" "); 
    if (playerPosition === tileID - 1) { 
     $("#player").remove(); 
     $("#????")").append('<img id="player" src="Pictures/maptiles/player.png" />'); 
     playerPosition = tileID; 
     alert("Player position now: " + playerPosition); 

    } 


}; 

}

結果我最終用從1開始的一個唯一的數字ID由每個的div的m×n個圖。我知道使用元素的數字標識是（被？）皺起了眉頭，儘管HTML5規範實際上並不禁止這一點。

現在我想要做的是根據玩家的位置放置一個玩家圖標（player.png）。起始位置是1，我使用瓷磚（又名divs）數字ID來計算合法移動（只能移動到邊框瓷磚上）。

當點擊一個貼圖時，調用該移動。它的目的是檢查玩家是否可以在單擊的圖塊上移動（現在只需一個IF語句來測試），並且必須移除player.png並在點擊的div上重新繪製它。

在這裏我遇到了一個問題，因爲我需要以某種方式使用tileID（它等於Div ID）告訴瀏覽器追加屬於單擊的DIV（因爲我顯然不會爲每個div編寫函數場）。我認爲，因爲我可以點擊獲得DIV ID，所以我可以以某種方式使用它。

我試着用this.div.id:eq（"+tileID+「）進行實驗，但沒有運氣。

UPD：

按要求添加點擊處理程序。請注意，這是VAR地圖，它負責構建地圖，渲染和處理一些用戶輸入中：

var Map = new function() { 
var maxHorz = 20; 
var maxVert = 5; 

var tiles = []; 
this.init = function() { 
    for(var i=0; i<maxVert; i++) { 
     tiles[i] = []; 
     for(var j=0; j<maxHorz; j++) { 
      tiles[i][j] = new Tile(Math.random()*6|0, j, i, tileID++); 
     } 
    } 

    Render(); 
    Setup(); 
}; 

this.GetMap = function() { 
    return tiles; 
}; 

var Render = function() { 
    $.each(tiles, function(k,v){ 
     $.each(v, function(k,t){ 
      t.Draw(); 
     }); 
    }); 
}; 

var Setup = function(){ 
    $('#map-content').on('click','div.tile', function(e){ 
     //var tile = tiles[$(this).data('y')][$(this).data('x')]; 
     this.tile.Move(); 
    }); 
} 

this.Redraw = function(x,y) { 

}; 

}

Map.init（）;

Answer 1

答案被發現，最後:)

$('#player').detach().appendTo($('#'+tileID))