你好，
我有這個標記：
<div data-users="room2">
<span data-room="room1,room2,room3">john</span>
<span data-room="room1">george</span>
<span data-room="room2">jane</span>
</div>
我只想要與 div 父具有相同房間資料的用戶，所以我寫了這個 css：
span { display: none; }
[data-users="room2"] [data-room*="room2"] { display: block; }
小提琴：https : //jsfiddle.net/ehpt9f5z/2/
但是，由于 div 父級中的資料可以更改為任何房間號，因此我需要一個變數，因此 CSS 選擇器將始終將來自子級的房間資料與其父級匹配，如下所示：
[data-users=$1] [data-room*=$1] { display: block; }
純css甚至可能嗎？
謝謝你。
uj5u.com熱心網友回復：
這不能單獨使用 CSS 來完成，因為沒有 CSS 父選擇器。
JavaScript 解決方案是回圈遍歷每個div具有data-users屬性的元素，然后回圈遍歷 的每個子元素div并顯示其data-room屬性包含data-users屬性值的元素。
const divs = document.querySelectorAll('div[data-users]')
divs.forEach(e => [...e.children].forEach(f => {
if(f.dataset.room.split(',').includes(e.dataset.users)){
f.style.display = "block"
}
}))span { display: none; }<div data-users="room2">
<span data-room="room1,room2,room3">john</span>
<span data-room="room1">george</span>
<span data-room="room2">jane</span>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/362109.html
標籤：javascript css 变量