Javascript 数据-*每个类的值

我有两个div

<div class='class' data-color='gray'>
</div>

<div class='class' data-color='red'>
</div>

这使得它们都是灰色的，我想现在发生的是，它只是获取第一个div的数据类型，然后将其应用于这两个div

所以为了尝试，我把变量放在。每个函数之外

但我还是没有运气，有什么工作可以做

$(".class").each(function(){
    var DivDataColor = $(".class").data("color");
    //                 ^^^^^^^^^^^
    $(this).css({'background': DivDataColor});
});

这里选择的是所有匹配的元素。然后，因为只能有一个数据颜色值，所以使用第一个

使用$this，如下所示：

$(".class").each(function() {
    var $this = $(this);
    var DivDataColor = $this.data("color");
    $this.css({'background': DivDataColor});
});

或者，最出色的是，通过采用反向方法将操作滚动为一：

$(".class").css("background", function() {
    return $(this).data("color");
});

在.each调用中使用此对象可访问.each调用中引用对象的数据颜色属性

---

将“.class”替换为此

相反，在用于设置样式的回调中返回数据属性

$(".class").css('background', function() {
    return $(this).data('color');
});

---

您的第一个示例似乎只进行了一次小的编辑：

将DivDataColor变量保留在each循环中，但不要重新选择.class类，而是使用以下变量：

---

下面是一个正在工作的jsbin示例：。

有趣的是，您正确地使用了$this.css。。。但仍然使用$.class.data。。。。“我想知道为什么？”费利克斯克林不确定，我猜我的脑子刚坏了。

$(".class").css("background", function() {
    return $(this).data("color");
});

$(".class").each(function(){
        var DivDataColor = $(this).data("color");
        $(this).css({'background': DivDataColor});
});

$(".class").each(function(){
    var DivDataColor = $(this).data("color"); 
    $(this).css({'background': DivDataColor});
});

$(".class").css('background', function() {
    return $(this).data('color');
});

$(this).data("color")