javascript - data-* 每个类的值

Question

我有2个div

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

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

如您所见，data-color 都有不同的值。第一个是灰色，第二个是红色。

这是我在 JavaScript (jQuery) 中使用它所做的:

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

这使得它们都具有灰色，我认为正在发生的事情是它只是采用第一个 div 的数据类型，然后将其应用于两者。

所以为了尝试，我将变量放在 .each() 函数之外

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

但我仍然没有运气，有什么解决办法？

Answer 1

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

此处您将重新选择所有匹配的元素。然后，因为只能有一个 "data-color" 值，是的，第一个被使用。

使用 $(this)，就像您在下面所做的那样:

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

或者，最出色的是，通过采用逆向方法将操作合并为一个:

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