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>值。它现在可以正常工作，但如果您尝试将最短日期设置为selected date + N，它将无法正常工作。它将N连接为字符串而不是添加。我也为这个案例添加了一些日志。

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

jQuery插件回调无法正常工作

1 个答案: