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

ajaxリクエストのデータとしてデータを使用します。

が設定されていない場合includeChangedValue、リクエストは以前と同じように機能します。

paramsそれ以外の場合は、 を使用して変更を他のインスタンスにコピーしたくないため、オブジェクトのコピーを作成しますdata = $.extend({}, params)。次に、 に渡された値に基づいて追加のプロパティを追加し、nameForChangedValueを使用して入力コントロールの値を使用し data[params.nameForChangedValue] = $(this).val();ます。
最後に、データ オブジェクトから不要なキーincludeChangedValueを削除します。nameForChangedValue

于 2013-04-08T15:59:27.353 に答える