Проблема с текущим выбранным ответом заключается в том, что вы на самом деле не создаете новый экземпляр настраиваемого плагина для каждого элемента в селекторе, как вы думаете, что делаете ... на самом деле вы создаете только один экземпляр и передаете сам селектор как область видимости.
Просмотрите эту скрипку для более глубокого объяснения.
Вместо этого вам нужно перебрать селектор с помощью jQuery.each и создать новый экземпляр настраиваемого плагина для каждого элемента в селекторе.
Вот как:
(function($) {
var CustomPlugin = function($el, options) {
this._defaults = {
randomizer: Math.random()
};
this._options = $.extend(true, {}, this._defaults, options);
this.options = function(options) {
return (options) ?
$.extend(true, this._options, options) :
this._options;
};
this.move = function() {
$el.css('margin-left', this._options.randomizer * 100);
};
};
$.fn.customPlugin = function(methodOrOptions) {
var method = (typeof methodOrOptions === 'string') ? methodOrOptions : undefined;
if (method) {
var customPlugins = [];
function getCustomPlugin() {
var $el = $(this);
var customPlugin = $el.data('customPlugin');
customPlugins.push(customPlugin);
}
this.each(getCustomPlugin);
var args = (arguments.length > 1) ? Array.prototype.slice.call(arguments, 1) : undefined;
var results = [];
function applyMethod(index) {
var customPlugin = customPlugins[index];
if (!customPlugin) {
console.warn('$.customPlugin not instantiated yet');
console.info(this);
results.push(undefined);
return;
}
if (typeof customPlugin[method] === 'function') {
var result = customPlugin[method].apply(customPlugin, args);
results.push(result);
} else {
console.warn('Method \'' + method + '\' not defined in $.customPlugin');
}
}
this.each(applyMethod);
return (results.length > 1) ? results : results[0];
} else {
var options = (typeof methodOrOptions === 'object') ? methodOrOptions : undefined;
function init() {
var $el = $(this);
var customPlugin = new CustomPlugin($el, options);
$el.data('customPlugin', customPlugin);
}
return this.each(init);
}
};
})(jQuery);
И рабочая скрипка .
Вы заметите, как в первой скрипке все div всегда перемещаются вправо на одинаковое количество пикселей. Это потому, что для всех элементов в селекторе существует только один объект параметров.
Используя описанную выше технику, вы заметите, что во второй скрипке каждый div не выровнен и перемещается случайным образом (за исключением первого div, поскольку его рандомизатор всегда установлен на 1 в строке 89). Это потому, что теперь мы правильно создаем новый экземпляр настраиваемого плагина для каждого элемента в селекторе. Каждый элемент имеет свой собственный объект параметров и сохраняется не в селекторе, а в экземпляре самого настраиваемого плагина.
Это означает, что вы сможете получить доступ к методам настраиваемого плагина, созданного для определенного элемента в DOM, из новых селекторов jQuery и не будете вынуждены кэшировать их, как если бы вы были в первой скрипке.
Например, это вернет массив всех объектов параметров, используя метод второй скрипки. Он вернет undefined в первом.
$('div').customPlugin();
$('div').customPlugin('options');
Вот как вам нужно будет получить доступ к объекту параметров в первой скрипке и вернуть только один объект, а не их массив:
var divs = $('div').customPlugin();
divs.customPlugin('options');
$('div').customPlugin('options');
Я бы предложил использовать описанную выше технику, а не тот, который был выбран в данный момент.