Добавление дополнительных параметров в 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 
        } 
        } 
       }); 
      }); 
     }); 
    }, 

Я называю этот плагин, передавая параметры в below.On некоторых случаях я дополнительные параметры передавались в.

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

Мой вопрос

Как я могу «толчок» объект params с ключом nameForChangedValue и значением val() от $("#mydropdownElement").

Таким образом, мой ожидаемый массив объектов должен выглядеть.

{ 
     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 
        } 
        } 
       }); 
      }); 
     }); 
} 

Update:
Как вы можете видеть, единственное изменение, которое я сделал это

  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 из объекта данных.