點擊時更新DIV內容，而無需直接知道其ID

Question

我正在構建2D瓷磚游戲地圖。 每個圖塊都是2D數組中的一個div（可變圖塊= []）。 以下是根據其他地方定義的一些參數構建圖塊的函數：

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組成的mxn映射，每個div都有一個以1開頭的唯一數字ID。我知道使用元素的數字ID是（過去了？），盡管HTML5規范實際上不再禁止這樣做了。

現在我要做的是根據播放器的位置放置一個播放器圖標（player.png）。 起始位置為1，我正在使用圖塊（又稱div）數字ID來計算合法移動（只能移動到邊界圖塊）。

單擊磁貼時將調用this.Move。 其目的是檢查玩家是否可以在單擊的圖塊上移動（現在僅測試一個IF語句），並且必須刪除player.png並在單擊的div上重繪它。

在這里我遇到了一個問題，因為我需要以某種方式使用tileID（等於Div ID）告訴瀏覽器附加屬於單擊的DIV（因為我顯然不在字段上為每個div編寫函數）。 我認為，由於我可以點擊獲得DIV ID，因此可以使用它。

我嘗試使用this.div.id:eq("+tileID+“）進行實驗，但是沒有運氣。

UPD：

根據要求添加點擊處理程序。 請注意，這在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（）;

Answer 1

找到答案了，最后:)

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