Получить Dom Element из расширения плагина jquery

Question

Я пытаюсь получить элемент dom из расширения jquery. Это позволяет пользователю сделать следующее

если я,

("#content").myPlugin.myMethod(myValue);

Я бы хотел:

$.fn.myPlugin.myMethod = function (myValue) { $(this).html(myValue); }

это основной пример того, чего я пытаюсь достичь. Хотя «this» - это не элемент Dom, а функция myPlugin.

как я могу получить доступ к #content?

С уважением,

theHaggis

Answer 1

«Стандартная» идиома заключается в использовании метода each () :

$.fn.myMethod = function(myValue) {
    return this.each(function() {
        $(this).html(myValue);
    });
};

Таким образом, вы можете поддерживать как объекты jQuery, содержащие несколько элементов, так и реализовывать цепочку одновременно.время.

Answer 2

Вы можете использовать closure и примитив bind () для изменения области функций в JS:

var myMethod = function (myValue) {$ (this) .html (myValue); }

$.fn.myPlugin = function() {
    var jq = this;
    return {
        myMethod : myMethod.bind(jq)
    }
}
$("#content").myPlugin().myMethod('eh oh!');

Примечание: проще изменить область функций с помощью замыкания, чем с помощью прототипа

Answer 3

функция (ваш плагин) назначена на myMethod, а myMethod вызывается myPlugin, поэтому при выполнении

$("#content").myPlugin.myMethod(myValue);

ключевое слово "this" будет указано на myPlugin.

вы можете увидеть здесь для получения дополнительной информации: что это означает в javascript

вы можете поместить свой метод в свой плагин и предоставить способ его вызова, например

$("#content").myPlugin('myMethod',parametersArray);

Answer 4

Пример 1

Чтобы использовать селектор, используемый в вашем плагине, используйте:

this.selector

Пример:

$.fn.myPluginMethod = function(myValue) {
    $(this.selector).html(myValue);
}

$("#content").myPluginMethod("Hello World");

Демонстрация скрипки: http://jsfiddle.net/nJeeH/

Пример 2

Единственное другое решение - создать искусственный метод myPlugin, который просто возвращает объект jquery для поддержания цепочки, но это не мешает вам просто вместо этого делать $("#content").myMethod("Hello World"); ..

$.fn.myPlugin = function(myValue) {
    return this;
}

$.fn.myMethod = function(myValue) {
    this.each(function() {
        $(this).html(myValue);
    });
}

$("#content").myPlugin().myMethod("Hello World");

Демонстрация скрипки: http://jsfiddle.net/nJeeH/1/