jQuery plug-in и переменная область

Question

Я разработал простой плагин, который позволяет вам создать раскрывающийся список для нескольких столбцов для текстового поля. Вы передаете URL-адрес веб-службы и массив селекторов jQuery, которые соответствуют каждому элементу, который вы хотите заполнить из каждого столбца в наборе результатов.

$ ('# txtProduct') multiColumnDropDown. ({ 'URL': '/ API/GetProductAndCategoryByRegion', 'цели': [ '#txtProduct', "#txtCategory"] });

Это построит выпадающий список из нескольких столбцов, и когда пользователь нажмет на него запись, #txtProduct и #txtCategory будут заполнены.

Все работает так, как должно, но я хочу иметь возможность применять несколько multiColumnDropDowns к моей странице. Я буду сталкиваться с проблемами в том, что я не знаю, как ссылаться на динамически сгенерированную разметку всплывающих окон, специфичную для экземпляра плагина.

В моем подключаемом модуле я создаю оболочку для раскрывающегося списка и размещаю ее там, где это необходимо. Если я хочу обновить оболочку и ее раскрывающийся список путем повторного запроса, как я могу убедиться, что я только обновляю тот, который я хочу, а не все обертки, которые я создал?

Полный код ниже:

(function ($) { 
var methods = { 
    init: function (options) { 
     return this.each(function() { 
      var settings = $.extend({ 
       'targets': [this] 
      }, options); 

      var targets = settings["targets"]; 

      var yOffset = $(this).position().top + $(this).height() + 'px'; 
      var xOffset = $(this).position().left + 'px'; 

      var wrapper = $('<div class="dropdown-wrapper"></div>') 
       .css('top', yOffset) 
       .css('left', xOffset) 
       .hide(); 

      $(document).click(function() { 
       wrapper.hide(); 
      }) 

      if (settings["url"] != undefined && settings["url"] != '') { 
       methods.populateDropDown(settings["url"], targets, wrapper); 
      } 

      $(this).click(function (e) { 
       e.stopPropagation(); 
       wrapper.show(); 
      }); 
     }); 
    }, 
    update: function (options) { 
     return this.each(function() { 
      var settings = $.extend({ 
       'targets': [this] 
      }, options); 

      var targets = settings["targets"]; 

      //How do I reference the correct wrapper? 
      //The following will reference all wrappers on the page :\ 
      var wrapper = $('div.dropdown-wrapper') 

      //Repopulate the wrapper and dropdown code goes here.... 
     }) 
    }, 
    populateDropDown: function (url, targets, wrapper) { 
     $.ajax({ 
      url: url, 
      type: 'get', 
      dataType: 'json' 
     }) 
     .done(function (data) { 
      var $table = $('<table class="multi-column-table">'); 
      data.forEach(function (item) { 
       var $tr = $('<tr>').appendTo($table); 
       var idx = 0; 
       $.each(item, function (k, v) { 
        var $td = $('<td>'); 
        if (targets[idx] != undefined) 
         $td.attr('data-target', targets[idx]); 
        $td.text(v); 
        $td.appendTo($tr); 
        idx++; 
       }); 
      }); 
      $table.on('click', 'tr', function() { 
       $.each(this.children, function (i, td) { 
        if ($(td).attr('data-target')) 
         $($(td).attr('data-target')).val($(td).text()); 
       }); 
      }); 
      $(wrapper).append($table).prependTo('body'); 

     }) 
     .fail(function (jqXHR, textStatus, errorThrown) { 
      alert('Error: ' + errorThrown); 
     }); 
    } 
}; 

$.fn.multiColumnDropDown = function (method) { 
    if (methods[method]) { 
     return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || !method) { 
     return methods.init.apply(this, arguments); 
    } else { 
     $.error('Method ' + method + ' does not exist on jQuery.multiColumnDropDown'); 
    } 
}; 

}) (Jquery);

И в случае, если какой-либо один заинтересован в CSS:

.dropdown-wrapper 
{ 
border:1px solid #000; 
border-bottom-right-radius:3px; 
border-bottom-left-radius:3px; 
z-index:100; 
background-color:#fff; 
position:absolute; 
} 

.dropdown-wrapper tr:hover 
{ 
background-color:#0081C2; 
color:#fff; 
} 

Answer 1

Вы можете обратиться к этому руководству Jquery Plugin Authoring (http://docs.jquery.com/Plugins/Authoring)

В принципе, вам нужно сохранить экземпляр плагина атрибут данных элемента управления html. Проверьте код ниже

var $this = $(this), 
     data = $this.data('tooltip'), 
     tooltip = $('<div />', { 
      text : $this.attr('title') 
     }); 

    // If the plugin hasn't been initialized yet 
    if (! data) { 

     /* 
     Do more setup stuff here 
     */ 

     $(this).data('tooltip', { 
      target : $this, 
      tooltip : tooltip 
     }); 

Answer 2

var wrapper = $('div.dropdown-wrapper') в ссылках методы на update все обертки на странице, как вы заметили, потому что вы выбираете все дивы с dropdown-wrapper классом.

Чтобы ссылаться на обертку, созданную в этом экземпляре, вы должны где-то хранить обертку, созданную в функции init. Для этого вы можете использовать метод data в контексте плагина.