javascript - JQuery 插件 : Function using $(this) inside the plugin's options

Question

大家好。

我正尝试按照我在 http://docs.jquery.com/Plugins/Authoring 中找到的步骤开发一个 Jquery 插件我似乎无法在传递给插件的选项中访问调用者对象(“this”变量)。这是一个我只想用来让按钮具有“闪烁”效果的插件。

我希望能够传递函数以在“显示/隐藏”(或链接闪烁，闪烁关闭，如果您愿意)中执行，作为插件的一个选项。假设用户希望通过每 1000 毫秒隐藏/显示整个按钮来实现“闪烁”效果。然后我希望选项是这样的:

$("#bttnOk").myBlinker ({
    blinkHide: function(){$(this).hide();},
    blinkShow: function(){ $(this).show();},
    interval:1000
});
// … //
// And to make it actually blink:
$("#bttnOk").myBlinker ("blink");

或者假设用户想要每 200 毫秒应用内联 CSS 样式上下移动按钮。然后选项会是这样的:

$("#bttnOk").myBlinker ({
    blinkHide: function(){$(this).css(“margin-top: 10px”);},
    blinkShow: function(){ $(this).css(“margin-top: 0px”);},
    interval:200
});

问题是，当我在选项中时，我似乎丢失了对“$(this)”的引用。当插件到达 blinkHide/blinkShow 函数时，“this” 是整个 DOM 窗口，而不是按钮 $(“#bttnOk”) 我的 “myBlinker” 插件被附加到。

这是我尝试编写的第一个 Jquery 插件，所以我什至不确定是否有办法实现我正在尝试做的事情。

我的插件代码遵循以下结构:

(function($){
    var defaultOptions = {
        interval: 500
    }

    var methods = {
        init : function( options ) {
            return this.each(function(){
                this.options = {}
                $.extend(this.options, defaultOptions, options);
                var $this = $(this);
                var data = $this.data('myBlinker');

                // If the plugin hasn't been initialized yet
                if ( ! data ) {
                    $this.data('myBlinker', {
                        on : true
                    });
                }
            });
        },
        destroy : function( ) { // Some code here},
        blink: function ( ){
            console.log("Blinking!. This: " + this);
            var current = 0;
            var button=this.get(0);
            setInterval(function() {
                if (current == 0){
                    button.options["blinkShow"].call(this);
                    current=1;
                } else {
                    button.options["blinkHide"].call(this);
                    current=0;
                }
            }, button.options["interval"]);
        }

    };

    $.fn. myBlinker = function( method ) {
        // Method calling logic
        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 on jQuery.myBlinker ' );
            return null;
        }
    };
})(jQuery);

任何想法、更正、链接或提示都将不胜感激。

谢谢。

Answer 1

在 setInterval 函数中，this 是全局对象，而不是像 blink 函数中的当前元素 DOMElement。

一个解决方案是保存对 this 的引用并在 setInterval 中使用这个保存的引用:

   blink: function ( ){

        // save a reference of 'this'
        var that = this;

        setInterval(function() {

            // use the saved reference instead of 'this'
            button.options["blinkShow"].call(that);

        }, button.options["interval"]);
    }

DEMO