Question

这个代码只是php来获取在线玩家数据：

printf( "<div class=\"online\"><b class=\"Race\"> %s </b><b class=\"PlayerName\"> %s </b><b class=\"PPID\"> %s </b><br><li class=\"Class\"> %s </li><b class=\"Role\"> %s </b><b class=\"Gender\"> %s </b></div>",$row["Race"], $row["PlayerName"], $row["PPID"], $row["Class"], $row["Role"], $row["Gender"]);

^^^^^^^^^^^^^^^^

无需关注上面的代码，结果就是这样：

从数据库中获取上述代码时我想要的结果：

我需要的是图像集

PLAYERNAME：JOHN

CLASS：WARRIOR＆lt; - （附图“标准战士图片”）

RACE：HUMAN＆lt; - （附图“标准人类图片”）

所有在线人类都可以获得相同的图片......当所有战士在网页上显示时都会有相同的图片。

例如：两位玩家出现

<b class="Race"> Human </b>
<b class="Class"> Warrior </b>
<b class="Race"> Elf </b>
<b class="Class"> Warrior </b>

如果我使用document.getElementByClassName("Race").style.backgroundImage = "url('human.png')" 这将选择所有种族人类和精灵，而我也想要精灵形象。无论如何，我可以设置关键字的样式或元素本身的值。

我希望提前感谢任何帮助。

Answer 1

虽然Javascript肯定不是这项工作的最佳工具，但你可以使用innerHTML属性来做你想做的事。

document.getElementByClassName("Race").forEach(function(dom){
    if(dom.innerHTML.indexOf('Human')>=0){
        dom.style.backgroundImage = "url('human.png')";
    }else if(dom.innerHTML.indexOf('Elf')>=0){
        dom.style.backgroundImage = "url('elf.png')";
    }
});

我想坚持你可以轻松更改你生成的HTML，然后使用非常快速简单的CSS样式来完成这项工作：

<b class="Race Human"> Human </b>
<b class="Class Warrior "> Warrior </b>
<b class="Race Elf"> Elf </b>
<b class="Class Warrior "> Warrior </b>

.Race.Human{
   background-image:url('human.png');
}
.Race.Elf{
   background-image:url('elf.png');
}

请注意，CSS版本不会要求您在添加播放器时重新运行脚本。虽然每次添加dom元素时都需要触发javascript版本。

Javascript - 通过其值为元素设置背景图像

1 个答案: