Question

我是jQuery插件的新手，所以我认为这是一个相对简单的问题。

我已经创建了一个控制HTML日历的插件。我希望能够在同一页面上有多个日历。每个日历都通过插件跟踪自己的数据。

当我在页面上有一个日历时，效果很好。但是，一旦添加更多，就会出现问题。 settings对象（存储所有日历信息）仅针对上次实例化的日历进行更新。因此，当我点击某些内容来修改第一个日历时，第一个日历的settings对象根本不会更改;只更新第二个日历的settings对象。

我认为这是我的插件如何针对传入的jQuery对象运行的问题，或者是我使用data()方法的方式。

在下面的代码中，当触发任何“更改设置”侦听器时，应该更改settings.listView值。然后，当调用showSettings()方法时，它应该使用更新的值。

这是我的插件的精简版：

(function($){
    var methods = {
        _init: function($el, options, config){

            var settings = $.extend({}, $.fn.pluginName.defaults, options, config);

            $el.data("settings", settings);
            settings = $el.data("settings");
            this.$el = $el;

            var instance = this;


            // change settings
            $el.on("click", ".popup.settings li.calendar", function(){
                // do stuff...

                //settings.listView = false;    // doesn't work
                instance.$el.data("settings").listView = false;     // doesn't work either
            });
            $el.on("click", ".popup.settings li.list", function(){
                // do stuff...

                //settings.listView = true;     // doesn't work
                instance.$el.data("settings").listView = true;     // doesn't work either
            });


        },

        showSettings: function (el){
            var settings = this.$el.data("settings");   // doesn't 

            var props = {
                classes: "settings",
                isList: settings.listView
            };

            // do more stuff...
        },

    }

    $.fn.pluginName = function(options){
        return this.each(function() {
            var config = {
                listView: false
            }

            methods._init($(this), options, config);

        });
    };

    $.fn.pluginName.defaults = {
        fullMobileQuery: "48em",   
        verticalScrollOffset: 30    
    };

}(jQuery));

jQuery插件/小部件仅修改上次实例化的变量

0 个答案: