Question

我正在开发一个jQuery插件，似乎无法覆盖默认设置，这是插件的片段。

        $.Auction  = {

        defaults: {
            parentId: '#span',
            bidButtonClassName: '.live_bid'
        }
    };


    $.setAuction = function(options){

        startAuction();

    }

    function startAuction(){

            var options = $.extend({}, $.Auction.defaults, options);
            alert(options.parentId);

    }



    $.setAuction({parentId: '#div'});

基本上我试图覆盖底部的parentId值，但它总是警告值#span。我有什么想法我做错了吗？谢谢！

Answer 1

您将{parentId: '#div'}作为参数传递给$.setAction，但您实际上并未使用它。你想做这样的事情：

$.setAuction = function(options){
    startAction(options);
}

function startAction(options){
        options = $.extend({}, $.Auction.defaults, options);
        alert(options.parentId);
}

编辑：@TmEllis建议更好的实现此功能的方法，但通过使默认值可自定义，可以使其更好：

(function($)
{
    $.fn.setAuction = function(options)
    {   
        options = $.extend({}, $.fn.setAuction.defaults, options);
        return this.each(function()
        {
            alert($(this).id);
        });
    };

    $.fn.setAuction.defaults =
    {
        bidButtonClassName: '.live_bid' 
    };
})(jQuery);

有关如何编写优秀jQuery插件的更完整的讨论，请参阅this article。

Answer 2

我认为您需要稍微更改一下代码。

$.fn.setAuction会优于$.setAuction（他们做两件不同的事情）

正如你所做的那样：

$("#span").setAuction ({bidButtonClassName:"classname"});

并将元素作为选择器传递给它而不是作为插件选项（除非它需要在选项中）

您的插件代码可能如下所示：

(function($) {

    $.fn.setAuction  = function(options) {   
        var defaults = {
          bidButtonClassName: '.live_bid' 
        };


      var options = $.extend(defaults, options);
      //or to preserve defaults
      var options = $.extend({}, defaults, options);

      return this.each(function() {
          obj = $(this); //"#span"
          alert(obj.id);


      });
   };
})(jQuery);

jQuery插件没有覆盖默认值

2 个答案: