从 data 属性解析 $.extend 配置

Question

我知道我可以使用 $.data 但如何迭代所有 data- 属性并将这些值与默认插件配置合并？

(function($){

  $.fn.plugin = function(opts){  

    opts = $.extend({
      foo: 'abc',
      boo: 45
    }, opts);

    return this.each(function(){        
          ...
    });

  };
})(jQuery);

因此，如果我使用

$('.el').plugin();

它应该在 .el 上查找数据属性，例如 data-foo 等...

Answer 1

在 each() 循环中，您可以合并 data() 与默认值，然后在一次调用 $.extend()：

$.fn.plugin = function(opts) {
    return this.each(function() {        
        var thisOpts = $.extend({
            foo: "abc",
            boo: 45
        }, $(this).data(), opts);
        // Now use 'thisOpts' as operating parameters for this element...
    });
};

这应该达到你的目的Want：opts 参数具有最高优先级，其次是当前元素的 data- 属性，最后是插件默认值。

Answer 2

.data() 方法支持 data- 属性。

从 jQuery 1.4.3 开始，HTML 5 数据属性将自动
拉入 jQuery 的数据对象。属性的处理方式为
嵌入的破折号在 jQuery 1.6 中进行了更改，以符合 W3C HTML5
规格。

在不指定参数的情况下调用它将返回一个包含所有数据属性的键/值对的对象：

var mydata = $("#mydiv").data();

Answer 3

您可以像这样获取元素的所有属性：

//get the element and setup an array for output
var el  = document.getElementById("o"),
    arr = [];

//loop through each attribute for the element
for (var i = 0, attrs = el.attributes, l=attrs.length; i < l; i++){

    //if the current attribute starts with `data-` then add it to the array
    if (attrs.item(i).nodeName.substr(0, 5) == 'data-') {
        arr.push(attrs.item(i).nodeName);
    }
}

这是一个演示： http://jsfiddle.net/ ksbD3/1/

另外，我从这个答案中得到了上面的大部分代码：使用 Javascript/jQuery 从 HTML 元素获取所有属性

Answer 4

您可以在 jQuery 对象上使用 data() 方法，该方法将以键/值对的形式提供所有数据属性。试试这个。

(function($){

  $.fn.plugin = function(opts){  

    //this.data() will give { foo: 'abc', boo: 45 ... }
    opts = $.extend(this.data(), opts);

    return this.each(function(){        
          ...
    });

  };
})(jQuery);

.data() 参考：http://api.jquery.com/data/< /a>

Answer 5

感谢您指出使用 opts = $.extend(this.data(), opts); 的所有答案

这里需要补充一个重要事实：HTML 数据属性的转换。

data-coolNname 可以这样访问 this.data(coolname)

data-another-cool-n ame 可以像这样访问 this.data(anotherCoolName)

详细信息：jQuery 是否在内部将 HTML5 数据属性键转换为小写？

如果您不了解，java 的大小写敏感和属性名称的转换可能会是一个陷阱。