Javascript 单击即可更新DIV内容，而不直接知道其ID

我正在构建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);

    }


};

功能磁贴（rnd、px、py、nid）{
var self=这个；
变量类型=[“草”、“森林”、“丘陵”、“沼泽”、“森林”、“山脉”]；
var高度=60；
var宽度=60；
var tileID=nid//new numeric tile id
var id=“磁贴”+px+py+rnd；//旧磁贴id
var x=px；
var y=py；
变量类型=_类型[rnd]；
var img='img/maptiles/'+type+'.png'；
this.Draw=function（）{
var div=$（“”）；
div.attr（'id'，tileID.）.data（'type'，type.）.data（'x'，x.）.data（'y'，y）；
div.get（0）.tile=self；
css（{top:height*y，left:width*x}）；
css（{“背景”：“url（'“+img+”）“}）；
div.appendTo（“#映射内容”）；
};
this.Alert=函数（）{
警报（“磁贴类型：“+type+”。磁贴ID：“+tileID+”）；
};
this.Move=function（）{//将播放器移动到可用的磁贴，在这种情况下，如果播放器站在单击的磁贴之前的磁贴上
警报（“开始移动！磁贴类型：+type+”。磁贴ID：+tileID+”）；
如果（播放位置===tileID-1）{
$（“#播放器”）.remove（）；
$（“？”）。附加（“”）；
playerPosition=tileID；
警惕（“玩家位置现在：+玩家位置”）；
}
};

}

因此，我最终得到了由div组成的mxn映射，每个div都有一个从1开始的唯一数字ID。我知道，对元素使用数字ID是（曾经？）不赞成的，尽管HTML5规范实际上不再禁止这样做

现在我想做的是根据玩家的位置放置一个玩家图标（player.png）。起始位置是1，我使用tiles（又名divs）数字ID来计算合法移动（只能移动到边界tiles）

单击互动程序时，将调用此.Move。其目的是检查播放器是否可以在单击的互动程序上移动（现在只需一条if语句进行测试），并且必须删除player.png并在单击的div上重新绘制它

在这里，我遇到了一个问题，因为我需要以某种方式使用tileID（等于Div ID）来告诉浏览器附加被单击的Div（因为我显然没有为字段上的每个Div编写函数）。我认为，因为我可以在单击时获得Div ID，所以我可以以某种方式使用它

我试图尝试使用这个.div.id:eq（“+tileID+”），但没有成功

UPD：

根据请求添加click处理程序。注意，这在var Map中，它负责构建映射、呈现和处理一些用户输入：

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) {

};

var Map=new函数（）{
var maxHorz=20；
var maxVert=5；
var-tiles=[]；
this.init=函数（）{
对于（var i=0；i最终找到了答案：）

为什么将
this
指定给
self
，然后从不使用
self
？当单击互动程序时，会调用此移动。为更清晰起见，是否可以显示单击处理程序？添加了单击处理程序（也复制了所有地图构建代码）
。appendTo（）
自动将元素从其实际位置移除，因此您可以将其缩短：
$（“#player”）.appendTo（$（“#”+tileID））
。
$('#player').detach().appendTo($('#'+tileID))