jQuery：使用自定义方法扩展DOM元素

Question

我有几个dom元素充当自定义小部件的占位符。我想扩展它们，为每种类型的小部件提供一个“setvalue”函数，如下所示：

$.fn.extend($(".dial"), { setval: function(val) { });

我不想扩展jQuery.fn本身，因为不同的小部件需要不同的setval方法。

有没有办法扩展特定类型的DOM元素而不是扩展jQuery.fn本身？

Answer 1

你可以这样做，但是，当在所述元素上使用其他方法时，所述方法可能会丢失。最好在元素的数据对象上或在小部件本身上实现该方法。

$(".dial").each(function(){
    $(this).data("setval",$.proxy(function(val){
        this.value = sanitize(val);
    },this));
}).eq(0).data("setval")("foobar");

Answer 2

上面的评论让我使用jQuery UI：

var WidgetDial = {
    _init: function() { ... },

    value: function(val) { ... },
};

$.widget("ui.widgetDial", WidgetDial);
$("#dial1").widgetDial();
$("#dial1").widgetDial("value", 30);