为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

明月笑刀无情 2022-05-22 10:25:28
(放轻松,我只是在学习 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>
查看完整描述

2 回答

?
米琪卡哇伊

TA贡献1998条经验 获得超6个赞

您可以使用data-属性来添加额外信息。就像是:

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

有关详细说明和了解如何在 javascript、css 等中使用它,您可以查看此MDN 文档


查看完整回答
反对 回复 2022-05-22
?
波斯汪

TA贡献1811条经验 获得超4个赞

单击该元素时,您应该获取该特定节点的数据,而不是使用数组过滤器将其与您的数据集匹配。您可以在此处查看有关数组过滤器的更多信息: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);

  })

})


查看完整回答
反对 回复 2022-05-22
  • 2 回答
  • 0 关注
  • 209 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信