javascript - 如何在 HTML 列表项中传递隐藏数据

Question

(别紧张，我只是在学习 HTML/JavaScript)

我想要一个仅显示人员姓名的列表，但是当单击列表项时，我想了解该人员的其余数据。

例如，给定以下 JSON 数据，如果我单击“Sally”，我想访问该 Sally 的年龄和性别(可能有多个 Sally)。

[
  {
    "name": "Charlie",
    "age": "9",
    "gender":"M"
  },
  {
    "name": "Sally",
    "age": "43",
    "gender": "F"
  },
  {
    "name": "Will",
    "age": "20",
    "gender": "M"
  },
  {
    "name": "Sally",
    "age": "18",
    "gender": "F"
  }
]

有没有办法向列表项添加额外信息而不显示它？类似的东西

<li class="list-item" age="18" gender="F">Sally</li>

Answer 1

您可以使用data- attributes添加额外信息。像这样的东西:

<li class="list-item" data-age="18" data-gender="F">Sally</li>

有关详细说明并了解如何在 javascript、css 等中使用它，您可以查看此 MDN doc .