我需要使用 .data() 方法获取数据答案

【问题标题】：I need to get data with .data() method我需要使用 .data() 方法获取数据
【发布时间】：2022-01-27 02:18:09
【问题描述】：

我有这个 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');

【问题讨论】：

为什么不一开始就买你想要的呢？ $("[data-element='element A']").css("color", "red");?不需要if，不需要loop，不需要.data()

标签： javascript html jquery css

【解决方案1】：

使用.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>

在原生 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... */

因为没有什么是动态的。

【讨论】：