У меня возникли проблемы с предоставлением моего плагина публичным функциям, вроде того, что я думаю о jQueryUI. Мой код плагина ниже.Простая публичная функция в простом плагине jQuery
Когда $("#someField").myPlugin({'editable':true}); называется она перебирает элементы, указанные, в этом случае только один #someField и устанавливает amount 0.
Тогда где-то из кода я хочу вызвать публичную функцию set10, которая влияет на элемент #someField я переданный плагин ранее.
Итак, когда $("#someField").myPlugin("set10"); вызывается с помощью оператора switch, он устанавливает значение 10. Теперь, однако, когда я нажимаю поле и код внутри click, он показывает сумму как 0 снова.
Я не понимаю, почему это не работает. Я бы подумал, что вызов .myPlugin на том же элементе DOM сохранит значение суммы, но, очевидно, я пропустил что-то важное здесь. Поблагодарили бы за помощь и объяснение.
(function($)
{
$.fn.myPlugin=function(options) {
// default settings
var settings = $.extend({
'editable': true
}, options);
return this.each(function()
{
var amount=0;
switch(options)
{
case "set10":
set10();
}
var t=$(this);
function set10()
{
amount=10;
}
t.on("click", function(e)
{
console.log(amount);
});
});
};
})(jQuery)
$("#someField").myPlugin({'editable':true});
$("#someField").myPlugin("set10");
EDIT:
После того, как более близкий взгляд на различной формы я соединял то, что, кажется, работает. Это следует за тем, что вы описали, но, пожалуйста, дайте мне знать, если что-то ужасно неправильно с моим подходом. В основном он привязывает данные, которые мне нужны, к самому элементу HTML через метод jQuerys data. Затем, когда функция вызывается, она проверяет, являются ли опции фактически строкой и вызывает соответствующий метод с этим контекстом этого конкретного элемента DOM, который мы имеем в каждом цикле. Является ли эта упрощенная версия того, как реализуется общедоступный метод? Как я уже сказал, это работает в моем плагине, но я хотел бы сделать это правильно и боюсь, что все еще есть проблема с моим aproach.
(function($)
{
$.fn.myPlugin=function(options) {
// default settings
var settings = $.extend({
'editable': true
}, options);
return this.each(function()
{
if(typeof options == 'string')
{
switch(options)
{
case "set10":
{
set10.call(this);
return;
}
}
}
var amount=0;
var t=$(this);
function set10()
{
var t=$(this);
amount=10;
$.data(t[0],"amount",amount);
}
t.on("click", function(e)
{
if($.data(t[0],"amount"))
amount = $.data(t[0],"amount",amount);
console.log(amount);
});
});
};
})(jQuery)