jquery - 调用jquery插件的自定义函数

Question

我创建了一个简单的 jquery 插件，如下所示：

$.fn.greenify = function () {
    var color = "green";
    this.css("color", color);

    function getColor() {
        return "green";
    }
};

//calling plugin
$("#test").greenify();

我想这样做是为了调用函数 getColor() 。如下所示：

var v1 = $("#test").greenify();
var color = v1.getColor();    

这当然不是这样做的方法。我怎么能打这样的电话？

Answer 1

您需要返回一个包含该函数的对象：

return { getColor: someFunction };

Answer 2

基于@MattBall 的回答，您可以通过扩展您在插件上下文中传递的 jQuery 对象来保持可链接性。

$.fn.greenify = function () {
    var color = 'green';
    this.getColor = function () {
        return 'green';
    };
    return this;
};

// so this will work:
$('#test').greenify().addClass('used-jquery-method');

// but you won't be able to do it again if you select again:
var color = $('#test').getColor();  // unknown method

// you'll have to cache it instead, and build from the same 'chain'
var element = $('#test').greenify().addClass('used-jquery-method');
var color = element.getColor();

Answer 3

虽然打破可链接性不是惯用的 jQuery，但这会起作用：

$.fn.greenify = function() {
   var color="green";
   this.css( "color", color );

   return {
       getColor: function () {
           return "green";
       }
   };
};