向 Jquery $.extend 添加额外参数

Question

我编写了一个 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，值为$("#mydropdownElement") 的val()。

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

    {
      fragments: "myfragmentforthissection",
      ajaxSource: true,
      _eventId: "myfragmentforthissectionEvent",
      formId: "#myform",
      event: "change",
      mychangedValueKey : "mydropdownvalue" //Key as the name I've passed in and the value is the value from the change event of the dropdown
   }

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

Answer 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();.
最后，我们从数据对象中删除不需要的键 includeChangedValue 和 nameForChangedValue。