[英]Update DIV content on click without directly knowing its ID
我正在构建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();
找到答案了,最后:)
$('#player').detach().appendTo($('#'+tileID))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.