多个元素的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，然后您可以在选项中指定将在其中显示按下的数字的目标输入。 / p>

只有一个元素可以正常工作，但是当我创建第二个实例时，第一个实例停止正常工作。 Live example

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

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);
        });
    };

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

assign jQuery plugin to multiple elements

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();
        });
    });
};