jQuery

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() 给你的。还要确保您声明了所有变量（它们可能已在您发布的代码段上方声明，我不知道）。

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

jQuery -get data attributes & assign them as CSS in a key value pair

css

keyvaluepair