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

Question

我正在构建 2D 瓷砖游戏 map 。每个图 block 都是二维数组中的一个 div (vartiles = [])。下面是根据其他地方定义的一些参数构建图 block 的函数:

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 map ，每个 div 都有一个以 1 开头的唯一数字 ID。我知道对元素使用数字 ID 是不受欢迎的(曾经？)，尽管 HTML5 规范实际上不再禁止这样做.

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

当单击某个图 block 时，将调用 this.Move。其目的是检查玩家是否可以在单击的图 block 上移动(现在仅测试一个 IF 语句)，并且必须删除player.png 并将其重新绘制在单击的 div 上。

这里我遇到了一个问题，因为我需要以某种方式使用tileID(等于Div ID)来告诉浏览器附加属于单击的DIV(因为我显然不会为每个div编写一个函数) field )。我认为既然我可以通过点击获取 DIV id，我可以以某种方式使用它。

我尝试用 this.div.id:eq("+tileID+") 进行实验，但没有成功。

更新:

根据要求添加点击处理程序。请注意，这是在 var Map 中，它负责构建 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();

Answer 1

终于找到答案了:)

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