jquery - 如何构建我的 jquery 插件以确保我可以在同一页面上激活多个实例

Question

我正在编写一个 jquery 插件，可以在文本输入上激活它。这个想法是显示默认的灰色帮助文本。与 https://squareup.com/ 上看到的非常相似

插件代码的第一个版本如下:

(function($) {
    var settings;
    $.fn.activate = function(callerSettings) {

        settings = $.extend({
            controlID: null,
            default_value: null,
            IsActive: false
        }, callerSettings || {});

        $(settings.controlID).focus(function() {
            if (!settings.IsActive) {
                if (this.value == settings.default_value) {
                    this.value = '';
                    $(this).css('color', '#333');
                }
                settings.IsActive = true;
            }
        });

        $(settings.controlID).blur(function() {
            if (settings.IsActive) {
                if (this.value == '') {
                    $(this).css('color', '#CCC');
                    this.value = settings.default_value;
                    settings.IsActive = false;
                }
                else {
                    settings.IsActive = true;
                }
            }
        });

        Init();       

        return this;
    };

    var Init = function() {

        if (settings.IsActive) {
            $(settings.controlID).css('color', "#000");
        }
        else {        
            $(settings.controlID).css('color', "#CCC");            
            $(settings.controlID).val(settings.default_value);
        }
    };

})(jQuery);

但是当我激活该插件的多个实例时，它无法正常工作。

那么有人可以指导我如何构建它以拥有多个实例吗？或者也许这有什么问题？

Answer 1

您的所有实例都使用相同的设置。

而不是:

(function($) {
    var settings;
    $.fn.activate = function(callerSettings) {

        settings = $.extend({

尝试:

(function($) {
    $.fn.activate = function(callerSettings) {

        var settings = $.extend({

问题出在 Init 上——你如何使用它？如果您只在 $.fn.activate() 中使用它，那么在那里定义它或者只是内联它:

(function($) {
    $.fn.activate = function(callerSettings) {

        var settings = $.extend({
            controlID: null,
            default_value: null,
            IsActive: false
        }, callerSettings || {});

        $(settings.controlID).focus(function() {
            if (!settings.IsActive) {
                if (this.value == settings.default_value) {
                    this.value = '';
                    $(this).css('color', '#333');
                }
                settings.IsActive = true;
            }
        });

        $(settings.controlID).blur(function() {
            if (settings.IsActive) {
                if (this.value == '') {
                    $(this).css('color', '#CCC');
                    this.value = settings.default_value;
                    settings.IsActive = false;
                }
                else {
                    settings.IsActive = true;
                }
            }
        });

        if (settings.IsActive) {
            $(settings.controlID).css('color', "#000");
        }
        else {        
            $(settings.controlID).css('color', "#CCC");            
            $(settings.controlID).val(settings.default_value);
        }

        return this;
    };

})(jQuery);

现在好点了吗？我没有测试过。