Question

我正在为我的网络应用创建一个简单的jQuery插件。现在我正在添加一个'settings'选项，可用于更改所选元素的默认CSS：

HTML

<script type="text/javascript">
   var mycss = {tagNormalStyle: {backgroundColor: '#ddd', color:'#222'}};
    $(document).ready(function(){
        $("#tag1").tagme(mycss);    
        $("#tag2").tagme(null);
    });
</script>

jQuery插件

$.fn.tagme = function(options) {

// some defaults
var settings = $.extend({
        tagNormalStyle:{
            backgroundColor: 'black',
            color: 'white',
            marginLeft: '5px',
            marginTop: '5px',
            padding: '5px',
            float: 'left',
            borderRadius: '5px'
        },
      //more stuff here...,
       options
      };
}

在我的代码中，我使用的是：

if (condition)
    tag.css = settings.tagNormalStyle;

问题是，如果用户仅需要来更改颜色，该怎么办？

var mycss = {tagNormalStyle: {color:'#222'}};
$("#tag1").tagme(mycss);

现在 tagNormalStyle 的所有默认设置都已消失！我怎样才能避免在我的设置对象上“硬编码”每个css属性？也许我可以“合并”默认值和选项对象。有什么想法吗？

谢谢！

Answer 1

将true作为extend函数的第一个参数传递。类似的东西：

$.extend(true,obj1,obj2)

jQuery插件覆盖所有css或仅覆盖一些属性

HTML

jQuery插件

1 个答案: