（別介意我，我只是在學習 HTML/JavaScript）我想要一個僅顯示人員姓名的列表，但是當單擊列表項時，我想了解該人員的其余數(shù)據(jù)。例如，給定以下 JSON 數(shù)據(jù)，如果我單擊“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貢獻1810條經(jīng)驗 獲得超4個贊
您可以使用data-屬性來添加額外信息。就像是：
<li?class="list-item"?data-age="18"?data-gender="F">Sally</li>
胡說叔叔
TA貢獻1804條經(jīng)驗 獲得超8個贊
單擊該元素后，您應該獲取該特定節(jié)點的數(shù)據(jù)，然后使用數(shù)組過濾器將其與您的數(shù)據(jù)集進行匹配。
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 關注
- 145 瀏覽
添加回答
舉報
0/150
提交
取消