javascript - jQuery 插件回调无法正常工作

Question

我在 jsfiddle 的简单插件中复制了该问题:https://jsfiddle.net/5atn3010/1/

这个想法是:

• 我有 2 个年份范围不同的选择器(从 2005 年到 2020 年)
• 当我在第一个选择器中选择一个选项时，所选值(例如 2010)会在第二个选择器中设置为最小值。
• 最后，第二个选择器被重新绘制，并且仅显示新值(从 2010 年到 2020 年)

这可行，但有一个很大的错误。不仅更改了第二个选择器的值，而且第一个选择器的最小值也发生了更改。

为什么会发生这种情况？怎么解决呢？

;(function ( $, window, document, undefined ) {

    "use strict";

    var pluginName = "testing";

    function Plugin( element, options ) {

        this.element = element;
        this.$element = $(element);
        this.name = pluginName;

        this.opts = $.extend({}, $.fn[pluginName].defaults, options);

        this.$elements = {
            year:null,
        }

        this.init(element,options);

    }


    Plugin.prototype =  {

        init: function () {
            var me=this;

            me.$elements.year=$("<select />").attr("name","year");
            if (me.opts.css!=null) {
                me.$elements.year.addClass(me.opts.css);
            }

            me.$elements.year.on("change",function() {
                me.opts.onChange.call(me,me.$elements.year.val());
                me._draw.call(me); //redraw me only for show error
            });

            me.$element.append(me.$elements.year);

            me._draw();
        },

        _draw: function() {
            var me=this;

            var date_start=me.opts.date.start;
            var date_end=me.opts.date.end;

            me.$elements.year.find("option").remove();
            for (var i=date_start;i<=date_end;i++) {
                var option=$("<option/>").attr("value",i).text(i);
                me.$elements.year.append(option);
            }
        },

        setMin: function(min) {
            this.opts.date.start=min;
            this._draw();
        }

    }


    $.fn[pluginName] = function(options) {
        var param=arguments[1];
        return this.each(function() {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }
            else if ($.isFunction(Plugin.prototype[options])) {
                $.data(this, 'plugin_' + pluginName)[options](param);
            } else {
                $.error('Method ' + options + ' is not available');
            }
        });
    };

    $.fn[pluginName].defaults = {
        date: {
            start:2005,
            end:2020
        },
        onSelect:function() {}
    };


})( jQuery, window, document );

$().ready(function(){
   $("#span1").testing({
       onChange:function(min) {
           console.log(min);
            $("#span2").testing("setMin",min);
       }
   });
   $("#span2").testing();
});

Answer 1

您的代码有两个问题。首先 - 您没有递归地扩展您的选项对象。简而言之 - 你有两个不同的 opts持有相同引用的对象 date目的。我添加了一些日志记录，以便您可以理解我在说什么。您需要深度复制您的选项对象。

请仔细阅读 jQuery.extends 页面 http://api.jquery.com/jquery.extend/

其次，您分配 this.opts.date.start到 <option>值(value)。目前它工作正常，但如果您尝试将最小日期设置为selected date + N，它将无法按预期工作。 。它将把 N 作为字符串连接起来而不是相加。我还为此案例添加了一些日志。

http://jsfiddle.net/5atn3010/7/