（別介意我，我只是在學(xué)習(xí) HTML/JavaScript）我想要一個(gè)僅顯示人員姓名的列表，但是當(dāng)單擊列表項(xiàng)時(shí)，我想了解該人員的其余數(shù)據(jù)。例如，給定以下 JSON 數(shù)據(jù)，如果我單擊“Sally”，我想訪問該 Sally 的年齡和性別（可能有多個(gè) 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" }]有沒有辦法向列表項(xiàng)添加額外信息而不顯示它？就像是<li class="list-item" age="18" gender="F">Sally</li>
2 回答
慕萊塢森
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以使用data-屬性來添加額外信息。就像是：
<li?class="list-item"?data-age="18"?data-gender="F">Sally</li>
胡說叔叔
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超8個(gè)贊
單擊該元素后，您應(yīng)該獲取該特定節(jié)點(diǎn)的數(shù)據(jù)，然后使用數(shù)組過濾器將其與您的數(shù)據(jù)集進(jìn)行匹配。
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);
? })
})
- 2 回答
- 0 關(guān)注
- 132 瀏覽
添加回答
舉報(bào)
0/150
提交
取消