jQuery - 获取数据属性并将它们分配为键值对中的 CSS

Question

我有以下 HTML

    <h4 data-padding-top="100" data-padding-left="0" data-text-align="left" data-color="#ffffff">Promotion Two</h4>

我想获取数据属性并将它们作为 CSS 样式分配回 H4。我有以下 JS 代码，但 css 函数调用给出了一个错误(我不想简单地添加 style=""；在 HTML 中客户端不舒服):

    var H4obj = {},
        $thisH4;

    function css(el, styles) {
        console.log(styles);
        for (var property in styles)
            el.style[property] = styles[property];
    }

    $('h4').each(function(index, el) {
        $thisH4 = $(this);

        var el = $thisH4;

        data = $thisH4.data();

        $.each(data, function(key, val){
            H4obj['data-' + key] = val;
        });

        $.each(H4obj, function(index, value){                
            css($thisH4, {index:value});
        });
    }); 

我是不是太过分了，有更简单的方法吗？

非常感谢任何帮助

Answer 1

我认为你犯了几个错误......在我看来你有比必要更多的变量，并且由于你已经在使用 jquery，你应该使用 jquery 的内置方法 .css.

$('h4').each(function(index, el) {
    var $el = $(el); // the jquery h4 object

    var data = $el.data();
    $el.css(data);
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h4 data-text-align="left" data-color='red'>Test One</h4>

<h4 data-text-align="right" data-color="blue">Test Two</h4>

基本上，.css 需要一个键值对，其中“data-”从键中删除。这正是 .data() 给你的。还要确保您声明了所有变量(它们可能已在您发布的代码段上方声明，我不知道)。