Question

我打算使用相同的XHTML5文件进行数据存储和显示。在设计时，将在浏览器中查看该文件。在编译时，它将被解析以生成UI内容。

我想将颜色数据存储为某些列表项的属性。然后，当加载页面时，每个列表项的颜色数据应该“转移”到项目的背景颜色，这样我就可以在浏览器中直观地检查颜色，并且可以轻松地解析十六进制字符串来自XHTML。

我已经拥有的东西（每个部分只有一行）：

(...)
<body>
    <ul>
        <li data-color="#ffeeaacc">EMG</li>
    </ul>
    <script>
        $('a[data-color]').??????
    </script>
</body>

我在javascript和Jquery中非常非常n00b，并且无法弄清楚我应该从现在开始做什么。最终结果应相当于：

<li data-color="#ffeeaac" style="background: #ffeeaacc">EMG</li>

谢谢！

Answer 1

#ffeeaacc不是有效的HEX颜色。 HEX颜色只包含三对两位数字，而不是四对。

$('*[data-color]').each(function(i, e){
    $(e).css('background-color', $(e).data('color'));
});

Answer 2

这应该有效：

$('li[data-color]').each(function() {
  $(this).css('background-color', $(this).attr('data-color'));
});

Answer 3

c你应该使用类似的东西：

jQuery('li[data-color]').each(function() {
    jQuery(this).css({'background-color':jQuery(this).data('color')});
});

一旦加载DOM，你就必须使用它

Answer 4

$('li[data-color]').each(function (){
    var color = $(this).data("color");
    $(this).css('background-color',color);
})

Answer 5

之前提供的所有答案都依赖于两件事：

data-color=""