jquery，修改插件的选项

Question

我正在尝试即时更改插件的选项。但我找不到这是如何实现的。不过，我确信我以前见过这样的事情。

这是一个带有 1 个选项的简单插件:

    <a href="javascript:void(0)" onclick="change_the_option(40)">click me</a>

    $(document).ready(function() {

        $(#menu).animateMenu({
            padding:20
        })

    });

function change_the_option(valchange){

 //somehow modify the option here, I'm guessing

}

它会随页面自动加载。但是，我可能希望动态更改填充选项，而不重新加载整个页面。

基本上，如果有人点击链接或我选择的任何选择器，我想将 padding:20 更改为 padding:40 或其他。

有人有动态修改插件选项的经验吗？

Answer 1

这个问题困扰了我一段时间，这是我找到的解决方法之一。对我有用。英语不是我的母语，所以如果我没有解释清楚，请原谅我。

这是我之前为切换开关创建的一个插件。

在 init 方法中，我将插件选项保存到 jQuery.data()，然后，我可以调用 simpleSwitchUpdate > 具有新选项的功能。正如您所看到的，我检索为元素保存的旧选项并调用 $.extend 来组成新选项，然后只需使用新选项。我已经使用这种模式来创建可更新插件一段时间了，它对我来说效果很好。

/**
 *  A plugin for switch
 */

(function($) {

    var Switch = {

        init : function(options, elm) {
            var self = this;
            self.$elm = $(elm);

            self.$elm.empty();
            self.options = $.extend({}, $.fn.simpleSwitch.options, options);

            self.$elm.data("switchData", self.options);
            self.$elm.append(self.createSwitch());

        },

        createSwitch : function() {

           //logic to create your plugin
        }
    };

    $.fn.simpleSwitch = function(options) {
        return this.each(function() {
            var simpleSwitch = Object.create(Switch);
            simpleSwitch.init(options, this);
        });
    };

    $.fn.simpleSwitchUpdate = function(options) {
        var switchData = this.data("switchData");
        var newOptions;
        if (switchData) {
            newOptions = $.extend({}, switchData, options);
        } else {
            newOptions = $.extend({}, $.fn.simpleSwitch.options, options);
        }

        return this.simpleSwitch(newOptions);
    };

    $.fn.simpleSwitch.options = {
        width : 25,
        height : 15,
        on : true,
        onDirection : "right",
        easing : "easeOutQuint",
        roundBorder : true,
        onColor : "orange",
        offColor : "lightgray",
        onToggle : null
    };

})(jQuery);

JSFIDDLE LINK