Предоставить плагину jQuery доступ к выбранным объектам DOM - PullRequest
Новая
       3

Предоставить плагину jQuery доступ к выбранным объектам DOM

3 голосов
/ 30 апреля 2011

Я экспериментирую с написанием плагина для jQuery, который не следует шаблону, изложенному в его документе: http://docs.jquery.com/Plugins/Authoring

Это выглядит следующим образом: 

(function( $ ){

$.fn.insert = {
    'hello': function(text){ 
        $(this).text(text); 
    },
    'goodbye': function(){
        alert('goodbye');
    }
}
})( jQuery );

На странице создается экземпляр этого плагина с этим кодом: 

$(document).ready( function(){
    $('#test').insert.goodbye();
    $('#test').insert.hello('blahblahblah');
});

В этой форме .goodbye() выполняет инициализацию правильно, но, как, вероятно, очевидно, .hello() не делает. При проверке this в firebug он показывает область действия принадлежащей ей функции. (кий лицевой щиток).

Как я могу дать функции внутри «привет» доступ к выбранным объектам DOM? Я не очень заинтересован в обсуждении того, почему или почему не следует создавать плагин таким способом. Для меня это больше академическое упражнение.

P.S. Я должен также отметить, что я получаю эту ошибку, когда часть hello() пытается выполнить: doc.createDocumentFragment is not a function.

UPDATE 

(function( $ ){

$.fn.insert = {
    'el': this,
    'hello': function(text){ 
        $(this.el).text(text); 
    },
    'goodbye': function(){
        alert('goodbye');
    }
}

})( jQuery );

Сделано это обновление для кода. К вашему сведению, Firebug показывает , что this.el ссылается на рассматриваемый объект DOM, а text по-прежнему несет переданную строку, но все еще не вставляет текст в элемент и все еще дает мне вышеупомянутое ошибка.

Ответы [ 2 ]

3 голосов
/ 30 апреля 2011

Я не уверен ... но это работает: 

<html>

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script>

            (function($){

                $.fn.myinsert = function(){

                    this.hello = function(text){ 
                        $(this).text(text);
                    };

                    this.goodbye = function(){
                        alert('goodbye');
                    };

                    return this; //this is the gotcha

                };

            })(jQuery);

            $(function(){
                var test = $('#test');
                test.myinsert().goodbye(); 
                test.myinsert().hello('heyo');
            });

        </script>
    </head>

    <body>

        <div id="test">My name is</div>

    </body>

</html>
0 голосов
/ 30 апреля 2011

Вы определили «вставить» как объект, расположенный в объекте jQuery, вместо функции, которая может быть вызвана для выбора. Я не думаю, что вы когда-либо сможете получить объем текущего выделения, структурировав его таким образом. Вы можете успешно вызвать goodbye (), так как он не зависит от контекста или области видимости для выполнения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...