图片未显示在表格中

debugcn 发表于 Dev

地质库存器

我正在自己的大学里学习香草JS课程。本课程仅适用于普通JS，因此不适用jQuery（我知道，bummer ...）。

我的问题不是要寻求帮助来解决问题，而是要弄清楚为什么没有出现问题。

我们的任务是使用教授提供的骨架代码创建一个简单的巨石破折号游戏。

我创建了一个2d数组，该数组包含游戏地图，其中数组中的每个元素都包含一个与特定.png文件相对应的引用（数字）。

在先前使用CSS和JS之后，我知道您可以使用项目的z轴将某些东西“放置”在另一个项目上方。但是，就我而言，它似乎不起作用，或者我缺少其他功能。

在绘制地图的if子句中，您可以看到我要查找的第一个数字（9）创建了一个单元格，该单元格将容纳一个名为“ baddie ”（玩家）的类，但还将保留一个id指的是“打开”。

var newRow = false;
content.appendChild(document.createElement('table'));
for (var row = 0; row < 10; row++) {
    // Each column in row
    if (newRow) {
        content.appendChild(document.createElement('tr'));
    }
    for(var col = 0; col < 10; col++){
        if (gameArea[row][col] == 9){
            tile = document.createElement('td');
            tile.id = 'open';
            tile.className = 'baddie';
            content.appendChild(tile);
            console.log("IM HERE");
        } else if (gameArea[row][col] == 10){
            tile = document.createElement('td');
            tile.id = 'open';
            content.appendChild(tile);
        }
        else if (gameArea[row][col] == 11){
            console.log("found one");
            tile = document.createElement('td');
            tile.id = 'wall';
            content.appendChild(tile);
        } else if (gameArea[row][col] == 12) {

        } else {

        }
    }
    newRow = true;

我期望坏人（因为具有较高的z索引）将被放置在“开放”的顶部，但这似乎没有发生。即使我删除对“打开”的引用，“坏蛋”也不会出现。

这是我设置的JS小提琴的链接：jsFiddle，您可以在其中找到所有代码。

如果我的问题不清楚，我需要弄清楚为什么Kyubi文件似乎没有显示出来？

在我的本地文件中，Kyubi.png文件位于磁贴的父文件夹中：

所有小块都像小提琴一样显示，但没有播放器对象...

发型

您正在将背景图片网址设置为.baddie类的属性。您的默认背景（非Baddie）是通过ID设置的。

由于CSS的特殊性，基于id的背景比类背景具有更高的优先级。

您还会遇到一个问题，即将相同的ID（“打开”）分配给多个元素-ID应该是唯一的。

找到一种方法来在td元素上设置背景，使其比ID更具特异性-尝试仅将其分配给td。

  td {
    z-index: 1;
    height: 31px;
    width: 31px;
    background-image: url(https://orionhub.org/file/Todai-OrionContent/images/new/grass0.png);
    border: 1px solid white;
}

通过更改打开选择器来修复js小提琴：jsfiddle

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。