JQueryプラグイン：プラグインのオプション内で$（this）を使用する関数

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"); 

かのユーザーがアップし、インラインCSSのsytleごとに200ミリ秒を適用ダウンボタンを移動したいと言ってみましょう。それから私は、オプションのようなものになりたいです。オプションは次のようになります：

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

問題は、私がオプションの中にいるときに "$（this）"への参照を失うように見えることです。プラグインがblinkHide/blinkShow関数に達すると、ボタン "（bttnOk"）my "myBlinker"のプラグインが接続されているのではなく、 "this"がDOMウィンドウ全体になります。

これは私が書こうとしている最初の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ではありません。うん...それは働いている

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