將回調函數傳遞給 jQuery 插件

Question

我正在創建一個接受輸入選項的 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);

然后上面的代碼將成功運行並顯示消息元素現在為綠色。 到控制台。

到現在為止還挺好。

現在，這是我面臨的問題。 如何將輸入參數傳遞給onGreenify函數？ 例如，我想做以下事情：

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

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

最終應該顯示Hello John。 元素現在是綠色的。 到控制台。

但我不確定如何修改以下代碼以允許它接受輸入參數

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

請注意，此函數應接受任意數量的輸入參數。 我無法控制用戶需要傳遞什么。

我的做法對嗎？ 需要修改的代碼段是什么？

謝謝。

Answer 1

嗨，這是一個簡單的演示，但是您的想法有些不好，如果名稱是 globale，則無需直接傳遞 get .. 我在想如何通過按元素傳遞名稱來完成去插拔：

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