Question

我有多个对象，如下所示。我想为每个项目显示特定于其类型的图像，将鼠标悬停在其上时，例如应显示其名称和dmg。悬停效果应类似于将鼠标悬停在个人资料上时的样子。

我该怎么做以及如何将对象数据保存在图像中？我可以用vanila javascript做到吗？如果没有，我应该使用这些类型的数据绑定吗？

let item = {
  name: "itemName",
  type: "weapon",
  dmg: 4
}

Inventory.js pastebin

index.html

<div class="inventory" id="inventory">
    <div class="active-items" id="active-items">
      <h3 class="inventory-h3">Active Items</h3>
    </div>
    <div class="bag-items" id="bag-items">
      <h3 class="inventory-h3">Bag</h3>
    </div>
</div>

编辑：当有人拿起物品时，库存ui会刷新并添加一个物品，但我希望该物品包含对象数据。我不知道该怎么做。

Answer 1

<img id="id" src="/src">
<div id="div_to_display_image_info"></div>


<script>
function(){
   let item = {
  name: "itemName",
  type: "weapon",
  dmg: 4
}
var img=document.getElementById('id')
 img.addEventListener('onmouseover', ()=>{
    document.getElementById("div_to_display_image_info").innerHTML = `dmg - ${item.dmg} name-${item.name}` 
})

}

</script>

将鼠标悬停在图像上时显示对象数据

1 个答案: