jQueryプラグインにコールバック関数を渡す

Question

this linkで説明されているように、入力オプションを受け入れるjQueryプラグインを作成しています。以下では、ユーザはコールバック関数を渡した場合、それはユーザ機能をトリガするように私はまた、プラグインを少し延びるい上記のリンクから同じコード

(function ($) { 
    $.fn.greenify = function(options) { 
     // This is the easiest way to have default options. 
     var settings = $.extend({ 
      // These are the defaults. 
      color: "#556b2f", 
      backgroundColor: "white" 
     }, options); 

     // Greenify the collection based on the settings variable. 
     return this.css({ 
      color: settings.color, 
      backgroundColor: settings.backgroundColor 
     }); 
    }; 
}(jQuery)); 

あります。

(function ($) { 
    $.fn.greenify = function(options) { 
     // This is the easiest way to have default options. 
     var settings = $.extend({ 
      // These are the defaults. 
      color: "#556b2f", 
      backgroundColor: "white", 

      onGreenify: function() {} // This is a new option 
     }, options); 

     // Greenify the collection based on the settings variable. 
     var newCss = this.css({ 
      color: settings.color, 
      backgroundColor: settings.backgroundColor 
     }); 

     // Execute the function 
     if (typeof settings.onGreenify == "function") { 
      settings.onGreenify(); 
     } 

     return newCss; 
    }; 
}(jQuery)); 

そして、ユーザーがこれを行うとき：：だから、プラグインは以下に進化し

var greenifyOptions = { 
    onGreenify: function() { 
     console.log("Element is now green."); 
    } 
} 

$("#id1").greenify(greenifyOptions); 

その後、上記のコードビットが正常に実行し、Elementは今緑のあるメッセージが表示されます。をコンソールに追加します。

これまでのところとても良いです。

ここで私が直面している問題があります。入力パラメータをonGreenify関数に渡すにはどうすればよいですか？例えば、私は、次の操作を実行したいと思います：

結局 こんにちはジョンが表示されます

var name = "John"; 
var greenifyOptions = { 
    onGreenify: function (name) { 
     console.log ("Hello " + name + ". Element is now green."); 
    } 
} 

$("#id1").greenify(greenifyOptions); 

。エレメントは緑色になりました。をコンソールに追加します。

しかし、私はそれが入力PARAM（複数可）を受け入れることができるように、次のコードを変更する方法がわからない

if (typeof settings.onGreenify == "function") { 
    settings.onGreenify(); 
} 

注意してください、この機能は、任意の数の入力パラメータを受け入れる必要があります。私はユーザーが渡す必要があるものを制御できません。

私のアプローチは正しいですか？変更が必要なコードは何ですか？

ありがとうございました。

Answer 1

ここでは単純なdemoですが、名前がグロバールであれば、直接渡す必要はありません。私は要素によって名前を渡す方法を考えていますが、 をplugingドによってスコープ何かさ：

 (function ($) { 

    $.fn.greenify = function(options) { 

     // This is the easiest way to have default options. 
     var settings = $.extend({ 
      // These are the defaults. 
      color: "#556b2f", 
      backgroundColor: "white", 

      onGreenify: function() {} // This is a new option 

     }, options); 

     // Greenify the collection based on the settings variable. 
     var newCss = this.css({ 
      color: settings.color, 
      backgroundColor: settings.backgroundColor 
     }); 

     // Execute the function 
     if (typeof settings.onGreenify == "function") { 

      //settings.onGreenify(); 
      settings.onGreenify.call(this, settings.name); 
     } 

     return newCss; 

    }; 

}(jQuery)); 
var name = 'juan' 
var greenifyOptions = { 
     name: 'juaanddd', 
    onGreenify: function (name) { 
     console.log("Element is "+name+" now green."); 
    } 
} 

$("#id1").greenify(greenifyOptions);