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

调用jquery插件的自定义函数

3 个答案: