0

我编写了一个 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()是$("#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
   }

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

4

1 回答 1

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

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

如果includeChangedValue没有像以前那样设置请求工作。

否则，我们创建对象的副本，params因为我们不希望使用data = $.extend({}, params). 然后我们根据传递给nameForChangedValue输入控件的值添加一个附加属性，并使用 data[params.nameForChangedValue] = $(this).val();. 最后，我们从数据对象
中删除不需要的键。includeChangedValuenameForChangedValue

于 2013-04-08T15:59:27.353 回答