jquery - 如何使用自己的数据属性设置 css 属性？

Question

假设我有这个小片段：

<p data-color="red">Hello world</p>

我想将其颜色设置为自己的数据属性，如下所示：

$('p').css({

    color: $(this).data('color')
});

由于某种原因，这是行不通的。有人知道我在做什么错吗？

Answer 1

this指的是别的东西，而不是p。试着把它放在一个函数中。

$('p').css('color', function() { return $(this).data('color'); });

Answer 2

​$('p').css('color', function() {
    return $(this).data('color');
});​​

演示

Answer 3

您可以在设置 css 属性之前将整个数据存储在一个对象中以避免循环。就像是 ：

var $p = $('p'),
    data = $p.data();

$p.css({
    color: data.color,
    fontSize: data.fontSize
});​

http://jsfiddle.net/aYpXZ/