Question

我有2个div

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

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

正如您所看到的，两个data-color都有不同的值。第一个是gray，第二个是red。

这是我在JavaScript（jQuery）中使用它所做的：

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

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

因此，对于trys，我将变量放在.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");
});

Answer 2

在this调用中使用.each()对象访问data-color调用中引用对象的.each()属性

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

Answer 3

反之，在回调中返回数据属性以设置样式

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

Answer 4

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

用这个

替换'.class'

Answer 5

你的第一个例子似乎只是一个小编辑：

将DivDataColor变量保留在“每个”循环中，但不要重新选择.class类，而是使用变量"this"：

$(this).data("color")

这是一个有效的jsbin示例：（http://jsbin.com/yuvetepo/1/edit）。

data- *每个类的值

5 个答案: