JQuery插件：在插件的选项中使用$（this）的函数

Question

大家好。

我想开发一个jquery插件，遵循我在http://docs.jquery.com/Plugins/Authoring中发现的步骤，并且我在传递给插件的选项内似乎遇到了调用者对象（“this”变量）的问题。这是一个插件，我只是想用来使按钮具有“闪烁”效果。

我希望能够将该功能作为插件的选项传递给“显示/隐藏”（或者，如果您愿意，可以链接闪烁，闪烁）。假设用户希望通过每1000毫秒隐藏/显示整个按钮来实现“闪烁”效果。然后我想的选项是这样的：

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

还是让我们说，用户希望移动的按钮向上和向下施加内嵌CSS sytle每200ms。然后选择办法是这样的：

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

的问题是，我似乎失去所提到的“$（本）”当我的选项内。当插件到达blinkHide/blinkShow函数时，“this”是整个DOM窗口，而不是我的“myBlinker”插件附带的按钮$（“＃bttnOk”）。

这是我试图写的第一个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