Javascript 表中随机生成的图像将消失

问题

我试图在一个表td中随机生成两个图像（角色的图像）的位置，但有时它们不会显示。其中一个或两个都会消失。尝试加载更多次（从1到5次）笔以使错误发生

笔

以下是所有代码：

感兴趣的功能

表格\地图是如何生成的？ 它是一个随机生成的2d数组，如下所示：

map = [[1,1,1,1,0],
       [1,0,0,0,0],
       [1,0,1,1,1],
       [1,0,0,0,1],
       [1,1,1,0,1]]

在我用这个在表中构建地图之后：

function mapGenerate(map){

        //loop the 2d array map and change the number with the appropriate img    
        for(var i = 0; i < map.length; i++) {
            var innerArrayLength = map[i].length;
            for(var j = 0; j<innerArrayLength; j++){
                if(map[i][j] === 0){
                    map[i][j]="<div class=\"tile\"><img class=\"walkable\" src=\"https://image.ibb.co/bGanFz/floor_Resized.png\"></div>";
                }else{
                    map[i][j]="<img class=\"nonWalkable\" src=\"https://image.ibb.co/m9s1az/volcanoresize.png\">";
                }    
                ;
            }
            $("#tableGame").append("<tr><td>"+ map[i].join('</td><td>') + "</td></tr>")    
        }
}

最后，在得到2个有效坐标后，我可以显示字符：

function place(coord, char){
  console.log('sei entrato nella funzione place');
  var charImage = $("<img>").attr("src", char.image).addClass('char');
  var row = $($("#tableGame tr")[coord.row]);
  var cell = $($("td", row)[coord.cell]);
  var tile = $($(".tile", row)[coord.cell]);
  tile.prepend(charImage);
};

我不明白为什么有时候一张或两张图片消失了，任何形式的帮助都会被感激

假设映射=

  [[1,1,1,1,0],
   [1,0,0,0,0],
   [1,0,1,1,1],
   [1,0,0,0,1],
   [1,1,1,0,1]]

而

coord.row

=0，

coord.cell

=4，则

$（“.tile”，row）

将是仅在1

.tile

内的jQuery对象。它会将

平铺

设置为

未定义

，并且不会

在图像前添加

function place(coord, char){
  console.log('sei entrato nella funzione place');
  var charImage = $("<img>").attr("src", char.image).addClass('char');
  var row = $($("#tableGame tr")[coord.row]);
  var cell = $($("td", row)[coord.cell]);
  var tile = $($(".tile", row)[coord.cell]);
  tile.prepend(charImage);
};

---

我真的很想谢谢你。你给了我一个很好的教训，并且修复了一个bug。真的，谢谢你。

  [[1,1,1,1,0],
   [1,0,0,0,0],
   [1,0,1,1,1],
   [1,0,0,0,1],
   [1,1,1,0,1]]

function place(coord, char){
  console.log('sei entrato nella funzione place');
  var charImage = $("<img>").attr("src", char.image).addClass('char');
  var row = $($("#tableGame tr")[coord.row]);
  var cell = $($("td", row)[coord.cell]);
  var tile = $($(".tile", row)[coord.cell]);
  tile.prepend(charImage);
};

function place(coord, char){
  console.log('sei entrato nella funzione place');
  var charImage = $("<img>").attr("src", char.image).addClass('char');
  var row = $($("#tableGame tr")[coord.row]);
  var cell = $($("td", row)[coord.cell]);

  // will out of bounds if the coord.cell is greater than the jQuery object $(".tile", row)
  // var tile = $($(".tile", row)[coord.cell]);

  var tile = $(".tile", cell);
  tile.prepend(charImage);
};