我有這個 HTML：
<div class="wrapper">
<ul class="list">
<li class="element" data-element="element A">element A</li>
<li class="element" data-element="element B">element B</li>
<li class="element" data-element="element C">element C</li>
</ul>
</div>
這是我的代碼：
const data = $('.wrapper .list . element').data('element');
console.log(data)
控制臺中的結果只是第一個元素 - 元素 A。但我需要它們中的每一個。因為我想接下來使用它們，例如：
if (data === 'element A') return $('li').css('color', 'red');
if (data === 'element B') return $('li').css('color', 'blue');
if (data === 'element C') return $('li').css('color', 'green');
uj5u.com熱心網友回復：
- 使用.each() jQuery 方法回圈元素
- 修復您的選擇器，
". element"無效。應該是".element"或者更確切地說："[data-element]"
$(".list [data-element]").each(function() {
console.log($(this).data("element"));
});
但這是我的建議，如何使用物件作為顏色參考來處理任務：
const dataColors = {
"element A": "red",
"element B": "blue",
"element C": "green",
};
$("[data-element]").each((i, el) => {
$(el).css({"color": dataColors[$(el).data("element")]});
});<div class="wrapper">
<ul class="list">
<li class="element" data-element="element A">element A</li>
<li class="element" data-element="element B">element B</li>
<li class="element" data-element="element C">element C</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>在 vanilla JavaScript 中，它也非常簡單：
const dataColors = {
"element A": "red",
"element B": "blue",
"element C": "green",
};
const ELS_data = document.querySelectorAll("[data-element]");
ELS_data.forEach(el => el.style.color = dataColors[el.dataset.element]);<div class="wrapper">
<ul class="list">
<li class="element" data-element="element A">element A</li>
<li class="element" data-element="element B">element B</li>
<li class="element" data-element="element C">element C</li>
</ul>
</div>無論如何，將 JS 用于該任務似乎很奇怪 - 使用顏色的硬編碼值。
如果您有一些動態的值，JavaScript 必須從 HTML 屬性（如data-color="orange"
const ELS_data = document.querySelectorAll("[data-color]");
ELS_data.forEach(el => el.style.color = el.dataset.color);<div class="wrapper">
<ul class="list">
<li class="element" data-color="red">element A</li>
<li class="element" data-color="hsl(200, 80%, 70%)">element B</li>
<li class="element" data-color="#fb0">element C</li>
</ul>
</div>否則，CSS 就足夠了：
[data-element="element A"] { color: red; }
[data-element="element B"] { color: blue; }
[data-element="element C"] { color: green; }
/* etc... */
因為沒有什么動態的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395749.html
標籤：javascript html 查询 css