Плагин jquery не работает на нескольких элементах - параметры перезаписаны - PullRequest
Новая
       17

Плагин jquery не работает на нескольких элементах - параметры перезаписаны

1 голос
/ 17 марта 2012

Я пытался создать свой первый плагин jquery (лайтбокс).Он работает на одном элементе так, как я хочу, но если я использую несколько элементов, он перезаписывает мои параметры.

Вот мой текущий код.похоже, он не работает на jsFiddle из-за разметки.

http://jsfiddle.net/BjwCm/

Вы можете скачать код с работающим (ошибочным) примером здесь:

http://frumbert.org/files/frumbox.zip

Я вижу, что я каким-то образом перезаписываю опции в объекте по умолчанию, когда привязываюсь ко второму объекту, но не знаю, что я сделал неправильно.Я пытался переместиться туда, где привязан клик, но не могу заставить его работать.

1 Ответ

1 голос
/ 17 марта 2012

$ this, объявленное во внешнем замыкании и используемое повсеместно, представляет последний элемент, для которого создается экземпляр FrumBox.

Лично я бы не пытался исправить код в его нынешнем виде.Вместо этого используйте шаблон jQuery "Best Practices" .Вот мой шаблон на основе приведенного примера: 

(function($){
    // **********************************
    // ***** Start: Private Members *****
    var pluginName = 'xxxxx';
    // ***** Fin: Private Members *****
    // ********************************

    // *********************************
    // ***** Start: Public Methods *****
    var methods = {
        init : function(options) {
            //"this" is a jquery object on which this plugin has been invoked.
            return this.each(function(index){
                var $this = $(this);
                var data = $this.data(pluginName);
                // If the plugin hasn't been initialized yet
                if (!data){
                    var settings = {
                    };
                    if(options) { $.extend(true, settings, options); }

                    $this.data(pluginName, {
                        target : $this,
                        settings: settings
                    });
                }
            });
        },
        myMethod_1 : function(){.....},
        myMethod_2 : function(){.....}
    };
    // ***** Fin: Public Methods *****
    // *******************************

    // *****************************
    // ***** Start: Supervisor *****
    $.fn[pluginName] = 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 in jQuery.' + pluginName );
        }
    };
    // ***** Fin: Supervisor *****
    // ***************************
})( jQuery );

Примечания:

  • Добавьте дополнительные закрытые члены и методы по мере необходимости.
  • Открытые члены (методы) являются привилегированными (они имеют доступ к закрытым членам).
  • Для обеспечения возможности объединения обязательно используйте шаблон return this.each(function(index){...}) во всех методах, кроме тех, которые возвращаютконкретное значение.
  • Возможно, самым сложным аспектом разработки с этим шаблоном (и другими) является понимание того, на что this ссылается в каждом контексте.Не забывайте о себе.
  • Будьте готовы использовать методы javascript Function.call() и Function.apply.Убедитесь, что вы их понимаете.
  • Супервизор на первый взгляд сложен для понимания, но его не нужно изменять.Это классный кусок кода.
  • Создайте плагин для элемента (ов) DOM с помощью $(selector).pluginNmae() или $(selector).pluginNmae(options), где options - это литерал объекта "map".
  • Вызовите методы для инициализированных элементов DOM с помощью $(selector).pluginNmae('methodName', ...)
  • Пример этого шаблона можно найти в выбранном ответе здесь (включая ссылку на скрипку).
...