将额外参数添加到Jquery $ .extend

时间:2013-04-08 15:47:54

标签: jquery jquery-plugins

我编写了一个jQuery插件,用于在点击或更改元素时触发模态。

$.fn.showInformationOverlay = function(options){
        var defaults = {
           fragments: "myfrag",
           ajaxSource: true,
           _eventId: "myfragEvent",
           formId: "#myform",
           event: "click"
        }

       var params = $.extend({},defaults, options);
       var $url = $(params.formId).attr("action");
       var $this = $(this);

       return $this.each(function(){
          $this.on(params.event,function(e){
               e.preventDefault();
               $.ajax({
                  type: "POST",
                  url:$url,
                  data:params,
                  success: function(data){
                    if (!!data) {
                           //Do something with data
                    }
                  }
              });
          });
       });
  },

我通过传递如下参数来调用此插件。在某些情况下,我传入了其他参数。

$("#mydropdownElement").showInformationOverlay({
        fragments: "myfragmentforthissection",
        ajaxSource: true,
        _eventId: "myfragmentforthissectionEvent",
        includeChangedValue: true, //Additional Param
        nameForChangedValue: "mychangedValueKey",//Additional Param
        event: "change"
}); 

我的问题是

如何将对象“推送”到params,其中密钥为nameForChangedValue且值为val()的{​​{1}}。

所以我期望的对象数组应该是这样的。

$("#mydropdownElement")

希望问题很清楚。提前谢谢了。

1 个答案:

答案 0 :(得分:1)

尝试

$.fn.showInformationOverlay = function(options){
        var defaults = {
           fragments: "myfrag",
           ajaxSource: true,
           _eventId: "myfragEvent",
           formId: "#myform",
           event: "click"
        }

       var params = $.extend({},defaults, options);
       var $url = $(params.formId).attr("action");
       var $this = $(this);

       return $this.each(function(){
          $this.on(params.event, function(e){
               var data;
               if(params.includeChangedValue){
                   data = $.extend({}, params);
                   data[params.nameForChangedValue] = $(this).val();
                   delete data.includeChangedValue;
                   delete data.nameForChangedValue;
               } else {
                   data = params;
               }
               e.preventDefault();
               $.ajax({
                  type: "POST",
                  url:$url,
                  data:data,
                  success: function(data){
                    if (!!data) {
                           //Do something with data
                    }
                  }
              });
          });
       });
}

更新:
正如您所看到的,我所做的唯一改变是

           var data;
           if(params.includeChangedValue){
               data = $.extend({}, params);
               data[params.nameForChangedValue] = $(this).val();
               delete data.includeChangedValue;
               delete data.nameForChangedValue;
           } else {
               data = params;
           }

并使用数据作为ajax请求的数据。

如果未设置includeChangedValue,请求将按原样运行。

否则,我们会创建params对象的副本,因为我们不希望使用data = $.extend({}, params)将更改复制到其他实例。然后我们根据传递给nameForChangedValue的值并使用输入控件的值添加一个额外的属性 data[params.nameForChangedValue] = $(this).val();
最后,我们从数据对象中删除了不需要的密钥includeChangedValuenameForChangedValue