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]
}

但我不知道如何写这个工作。任何想法都表示赞赏。提前谢谢！

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/

Answer 2

传递实际函数，而不是调用函数（即删除()）：

fn : $.fn.next

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

jQuery Widget，我如何作为widget选项传递jQuery函数

2 个答案: