如何在 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。

Answer 2

单击该元素后，您应该获得该特定节点的数据，然后使用数组过滤器将其与您的数据集进行匹配。您可以在此处查看有关数组过滤器的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

document.querySelectorAll('li').forEach(item => {
  item.addEventListener('click', event => {
    // handle click
    console.log(item)
    // data would be the array of objects, you provided
    let result = data.filter(person => person.name == item.innerText);
    // this would return two elements from your array with "Sally"
    console.log(result);
  })
})

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

How to pass hidden data in HTML list item

html

javascript

html-lists