如何在 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-属性来添加额外信息。就像是：

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

Answer 2

单击该元素后，您应该获取该特定节点的数据，然后使用数组过滤器将其与您的数据集进行匹配。

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);

  })

})