jQuery小部件，如何将jQuery函数作为小部件选项传递

Question

我正在创建一个基本小部件用于切换元素可见性。初始化代码如下：

$('button').collapsable({
    target:'#targetID'
});

我希望能够传递一个jQuery函数，例如：

$('button').collapsable({
    target:$(this).next();
});

简单的例子，重点是我希望能够根据需要传递更复杂的函数。我遇到的问题是如何在小部件内调用该函数以在其自身上调用该函数。

例如（代码不正确）：

toggle:function(){
    // i want it to firelike [this widget instances element].next();
    this.call[this.options.target]
}

但是我不知道如何编写才能使其正常工作。如果您有任何想法，将不胜感激。

提前致谢！

- ted.goodridge

Answer 1

如 @cwolves 所说，您需要传递一个函数引用。您可以实现一些逻辑来确定您是否正在查看函数或选择器，并采取相应的措施：

(function($) {
    $.fn.collapsible = function(options) {
        var self = this;
        var toggle = function () {
            /* options.target is a selector: */
            if (typeof options.target === "string") {
                $(options.target).toggle();
            } else if (typeof options.target === "function") {
                $(options.target.call(this)).toggle();
            }
        };

        this.click(toggle);
    };
})(jQuery);

那么你可以像这样使用它：

$("#button").collapsible({
    target: "#foobar"
});

$("#button2").collapsible({
    target: function () {
        console.dir(this);
        return $(this).next();
    }
});

示例： http://jsfiddle.net/LVsys/

- Andrew Whitaker

---

有一个注意事项——它是用于小部件工厂小部件的，jQuery论坛上的一个回复有略微修改过的代码来处理小部件内部：<code> toggle: function(){ var target; if ( $.isFunction(this.options.target) ) { target = this.options.target.call(this.element.get()); } else { target = $(this.options.target); } ... }</code> - ted.goodridge

Answer 2

传递实际函数，而不是被调用的函数（即省略()）：

fn : $.fn.next

, toggle : function(){
    this.options.fn.apply( this.options.target, arguments );
}                                 ^
                                  |
    domNode ----------------------+

- user578895