单击时更新 DIV 内容，而无需直接知道其 ID

我正在构建2D瓷砖游戏地图。每个图块都是 2D 数组中的一个div（var 图块 = []）。下面是基于其他地方定义的一些参数构建磁贴的函数：

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);
    }

};

}

结果，我最终得到了由div 组成的 m x n 地图，每个div 都有一个以 1 开头的唯一数字 ID。我知道对元素使用数字ID是不受欢迎的，尽管HTML5规范实际上不再禁止这样做。

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

时，单击此磁贴。移动被调用。其目的是检查玩家是否可以在单击的磁贴上移动（现在只有一个 IF 语句进行测试），并且必须删除播放器.png并在单击的div 上重新绘制它。

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

我试图尝试这个.div.id：eq（"+tileID+"），但没有运气。

上级：

根据请求添加点击处理程序。请注意，这是在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) {
};

}

Map.init（）;