如何使用html5数据属性覆盖jquery插件选项

Question

我想要做的是像往常一样将选项设置为插件,但也使用html5数据属性覆盖这些选项.

我在这里(jsfiddle),但是有一个小问题.

JSFiddle代码:

(function($){
    $.fn.extend({
        test: function(options) {

            var defaults = {
                background: null,
                height: null
            };

            var options = $.extend( defaults, options);

            return this.each(function() {
                  var o = options;
                  var obj = $(this);
                  var objD = obj.data();


                    // background
                    if ( !objD.background) {
                        var cBG = o.background;
                    }
                    else {
                        var cBG = objD.background;
                    }

                    // Opacity
                    if ( !objD.height) {
                        var cH = o.height;
                    }
                    else {
                        var cH = objD.height;
                    }

                    obj.css({
                        background: cBG,
                        height: cH  
                    });

            });
        }
    });
})(jQuery);

$(document).ready(function() {
    $('.test').test({

        background: 'red',
        height: 400

    });
});

我在jsfiddle中使用的方法非常繁琐,即使只有2个不同的选项也在使用数据.

问题是:如何用较少的代码实现相同的最终结果,以确定是否应该使用数据？

---

---

以下是来自jsfiddle的代码的一部分,它确定是否使用数据.

// objD is obj.data();

// background
if ( !objD.background) {
    var cBG = o.background;
}
else {
    var cBG = objD.background;
}

// Opacity
if ( !objD.height) {
    var cH = o.height;
}
else {
    var cH = objD.height;
}

obj.css({
    background: cBG,
    height: cH  
});

Answer 1

我有一种感觉,可能有更好的解决方案,但直到现在我都无法使其正常工作.

当然我不是专家,但这似乎工作并且更多地缩短了代码,因为它的工作方式与插件选项通常的方式相同,只是添加了内容data-attribute.

1. Default- 最初使用default选项.
2. Custom- 如果设置,使用自定义options覆盖defaults.
3. Data- 如果设置,则使用data覆盖两者.

http://jsfiddle.net/lollero/HvbdL/5/

o = $.extend(true, {}, options, $(this).data() );

这是另一个jsfiddle例子.

这一个在点击时切换每个框的宽度.中间框的数据属性的宽度值大于其他div.

作为一个额外的例子,这里有一个相同的东西,混合中添加了1个选项.