jQuery插件的多个元素

Question

我是Jquery插件的新手，在搜索了网络上的教程和问题后，我仍然试图弄清楚如何使我的插件与多个元素一起使用，我意识到插件编​​码很大程度上取决于您的插件，因此可能很难找到特定解决方案的模板。

这是我的简单插件

jQuery.fn.numpad = function(options,callback) {

    var settings = $.extend({
            // These are the defaults.
            field: "#numpadInput",
            keys: "full",
            type: "numeric",
            width: "210"
        }, options );

    if(settings.keys == 'lock'){
        var numpad  = '<div id="numpadWrap" style="width:'+settings.width+'px" class="demo-button"> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">1</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">2</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">3</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">4</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">5</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">6</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">7</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">8</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">9</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">0</a></div> <div class="col-sm-8"><a class="btn btn-block delete btn-white btnNumpad"><i class="fa fa-long-arrow-left"></i></a></div> </div>';
    }else{
        var numpad  = '<div id="numpadWrap" style="width:'+settings.width+'px" class="demo-button"> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">1</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">2</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">3</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">%</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">4</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">5</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">6</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">.</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">7</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">8</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">9</a></div> <div class="col-sm-3"><a class="btn btn-block delete btn-white btnNumpad"><i class="fa fa-long-arrow-left"></i></a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">0</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">00</a></div> <div class="col-sm-6"><a class="btn btn-block clear btn-white btnNumpad">Clear</a></div>';
    }

    this.html(numpad);

    input = $(settings.field);
    input.attr('readonly',true);
    input.attr('type',settings.type);

    $('#numpadWrap a').on('click',function(e){
        e.preventDefault();
        var key         = $(this),
            character   = key.text();



        // Delete
        if (key.hasClass('delete')) {
            var value = input.val();

            input.val(value.substr(0, value.length - 1));
            return false;
        }else if (key.hasClass('clear')) {      
            input.val('');
            return false;
        }

        // Add the character
        input.val(input.val() + character);
        callback();
    });
}

用法：

var options = {
                field: '#password',
                type: 'password',
                keys: 'lock',
                width: '200'
                };

    $('#numpad1').numpad(options);

在这种情况下，它是将数字键盘连接到DIV #numpad1 ，然后您可以在选项中指定将显示所按数字的目标输入。

它仅对一个元素有效，但是随后，当我创建第二个实例时，第一个实例停止正常工作。 现场例子

希望你们能帮助我，谢谢！

Answer 1

不久前我遇到了同样的问题，并克服了这个问题：

第1步：将整个插件写入函数

var numpadFunc = function(options,callback, element) {

    var settings = $.extend({
            // These are the defaults.
            field: "#numpadInput",
            keys: "full",
            type: "numeric",
            width: "210"
        }, options );

    if(settings.keys == 'lock'){
        var numpad  = '<div id="numpadWrap" style="width:'+settings.width+'px" class="demo-button"> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">1</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">2</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">3</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">4</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">5</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">6</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">7</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">8</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">9</a></div> <div class="col-sm-4"><a class="btn btn-block btn-white btnNumpad">0</a></div> <div class="col-sm-8"><a class="btn btn-block delete btn-white btnNumpad"><i class="fa fa-long-arrow-left"></i></a></div> </div>';
    }else{
        var numpad  = '<div id="numpadWrap" style="width:'+settings.width+'px" class="demo-button"> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">1</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">2</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">3</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">%</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">4</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">5</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">6</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">.</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">7</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">8</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">9</a></div> <div class="col-sm-3"><a class="btn btn-block delete btn-white btnNumpad"><i class="fa fa-long-arrow-left"></i></a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">0</a></div> <div class="col-sm-3"><a class="btn btn-block btn-white btnNumpad">00</a></div> <div class="col-sm-6"><a class="btn btn-block clear btn-white btnNumpad">Clear</a></div>';
    }

    element.html(numpad);

    input = $(settings.field);
    input.attr('readonly',true);
    input.attr('type',settings.type);

    $('#numpadWrap a').on('click',function(e){
        e.preventDefault();
        var key         = $(element),
            character   = key.text();



        // Delete
        if (key.hasClass('delete')) {
            var value = input.val();

            input.val(value.substr(0, value.length - 1));
            return false;
        }else if (key.hasClass('clear')) {      
            input.val('');
            return false;
        }

        // Add the character
        input.val(input.val() + character);
        callback();
    });
}

第2步：在插件中调用函数

$.fn.numpad = function(options, callback){
    return $(this).each(function(){
        typingTextFunc(options, callback, this);
        });
    };

注意：您可能遇到的任何其他问题都是由功能代码引起的，请尝试对其进行维护，并在下面查看我对自己问题的回答，这可能会启发您一些想法！

将jQuery插件分配给多个元素

Answer 2

http://jsfiddle.net/THEtheChad/cAc7y/4/

$.fn.numpad = function(options, callback) {

    // defaults
    options = $.extend({
        field: "#numpadInput",
        keys: "full",
        type: "numeric",
        width: "210"
    }, options);


    if (options.keys == 'lock') {
        var numpad = '<div style="width:' + options.width + 'px" class="demo-button numpadWrap"> <div class="col-sm-4 col-xs-4"><a class="btn btn-block btn-default btn-numpad">1</a></div> <div class="col-sm-4 col-xs-4"><a class="btn btn-block btn-default btn-numpad">2</a></div> <div class="col-sm-4 col-xs-4"><a class="btn btn-block btn-default btn-numpad">3</a></div> <div class="col-sm-4 col-xs-4"><a class="btn btn-block btn-default btn-numpad">4</a></div> <div class="col-sm-4 col-xs-4"><a class="btn btn-block btn-default btn-numpad">5</a></div> <div class="col-sm-4 col-xs-4"><a class="btn btn-block btn-default btn-numpad">6</a></div> <div class="col-sm-4 col-xs-4"><a class="btn btn-block btn-default btn-numpad">7</a></div> <div class="col-sm-4 col-xs-4"><a class="btn btn-block btn-default btn-numpad">8</a></div> <div class="col-sm-4 col-xs-4"><a class="btn btn-block btn-default btn-numpad">9</a></div> <div class="col-sm-4 col-xs-4"><a class="btn btn-block btn-default btn-numpad">0</a></div> <div class="col-sm-8 col-xs-8"><a class="btn btn-block delete btn-default btn-numpad">Del</a></div> </div>';
    } else {
        var numpad = '<div style="width:' + options.width + 'px" class="demo-button numpadWrap"> <div class="col-sm-3 col-xs-3"><a class="btn btn-block btn-default btn-numpad">1</a></div> <div class="col-sm-3 col-xs-3"><a class="btn btn-block btn-default btn-numpad">2</a></div> <div class="col-sm-3 col-xs-3"><a class="btn btn-block btn-default btn-numpad">3</a></div> <div class="col-sm-3 col-xs-3"><a class="btn btn-block btn-default btn-numpad">%</a></div> <div class="col-sm-3 col-xs-3"><a class="btn btn-block btn-default btn-numpad">4</a></div> <div class="col-sm-3 col-xs-3"><a class="btn btn-block btn-default btn-numpad">5</a></div> <div class="col-sm-3 col-xs-3"><a class="btn btn-block btn-default btn-numpad">6</a></div> <div class="col-sm-3 col-xs-3"><a class="btn btn-block btn-default btn-numpad">.</a></div> <div class="col-sm-3 col-xs-3"><a class="btn btn-block btn-default btn-numpad">7</a></div> <div class="col-sm-3 col-xs-3"><a class="btn btn-block btn-default btn-numpad">8</a></div> <div class="col-sm-3 col-xs-3"><a class="btn btn-block btn-default btn-numpad">9</a></div> <div class="col-sm-3 col-xs-3"><a class="btn btn-block delete btn-default btn-numpad">Del</a></div> <div class="col-sm-3 col-xs-3"><a class="btn btn-block btn-default btn-numpad">0</a></div> <div class="col-sm-3 col-xs-3"><a class="btn btn-block btn-default btn-numpad">00</a></div> <div class="col-sm-6 col-xs-6"><a class="btn btn-block clear btn-default btn-numpad">Clear</a></div>';
    }

    this.each(function(){
        var $input = $(options.field);
        $input.attr('readonly', true);
        $input.attr('type', options.type);

        var $numpad = $(this);
        $numpad.html(numpad);

        // use event delegates for added performance
        $numpad.on('click', 'a', function(evt){
            evt.preventDefault();

            var $key = $(this),
                char = $key.text();

            // Delete
            if ($key.hasClass('delete')) {
                var val = $input.val();
                val = val.substr(0, val.length - 1);

                $input.val(val);
                return false;
            } else if ($key.hasClass('clear')) {
                $input.val('');
                return false;
            }

            // Add the character
            $input.val($input.val() + char);
            callback && callback();
        });
    });
};