Плагины JQuery: как получить доступ к параметрам?

В настоящее время я пишу плагин jQuery с некоторыми параметрами.

Пример упрощенной части кода с веб-страницы:

<div id="div1"></div>
<div id="div2"></div>

$(document).ready(function(){
    $("#div1").myFunc({width: 100, height: 100});
    $("#div2").myFunc({width: 200, height: 200});
});

И здесь (еще упрощённый) код плагина:

(function($) {
 $.fn.myFunc = function(options) {
  // extending default settings
  var options = $.extend( {
   width: 300,
   height: 200
  }, options);

     return this.each(function() {
      // doing something for example with #div1
         $(this).click(function() {
          // here I need to access ANOTHER (e.g. #div2) object options
          // how can I do it?
         });
     });
 }
})(jQuery);

Ну, вопрос в листинге - как я могу получить доступ к другим объектным опциям изнутри функции плагина? Что-то вроде $( "# div2" ). Options.width

Ответы

Ответ 1

Вы можете выполнить это, используя метод jQuery .data(ключ, val), чтобы установить эти параметры перед тем, как получить к ним доступ в своем плагине:

  // set 'options' for '#div2'
  $("#div2").data('options', {width: 500, height: 500});

  // get 'options' for '#div2' (this would be in your plugin code)
  var opts = $('#div2').data('options');
  alert('options.height:' + opts.height + '\n'
        'options.width:' + opts.width);

Когда вы храните данные в словаре-подобном объекте, вы можете установить практически любые данные, которые вы хотите:

  $("#div2").data('priority', 2);
  $("#div2").data('flagColors', ['red', 'white', 'blue']);
  $("#div2").data('parts', {arm: 2, legs: 2});

... и получить его позже следующим образом:

  var foo = $("#div2").data('priority');
  var foo2 = $("#div2").data('flagColors');
  var foo3 = $("#div2").data('parts');

За кулисами jQuery добавляет одно свойство expando к элементу DOM вашего выбора jQuery (внутренне сгенерированное значение UUID), значение которого является уникальным ключом в jQuery.cache, который в основном там, где все ваши данные сохраняется/извлекается из.

Чтобы выполнить очистку, вызовите .removeData(key) (если ключ не передан, все данные удаляются).

Ответ 2

(function($) {
 $.fn.myFunc = function(options) {
  var options = $.extend( {
   width: 300,
   height: 200
  }, options);

     return this.each(function() {

         $(this).bind('click', {myOptions: options}, function(event) {
              optionsHere = event.data.myOptions;
         });
     });
 }
})(jQuery);

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

jQuery bind

Ответ 3

Простой ответ: вы не можете. options object, переданный в плагин в каждом экземпляре, используется для назначения значений свойствам локально объявленного объекта options, который не будет доступен за пределами области функций плагина.

Вы можете найти несколько способов сделать то, что хотите, например, дополнительные свойства options object, которые вы передаете.

Ответ 4

Почему бы не добавить метод к вашему плагину, который возвращает объект options?

Ответ 5

см. этот ответ, вторая часть решает проблему без реструктуризации вашего плагина. В основном сделать ваши варианты глобальными, и они будут доступны после инициализации в первый раз