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

它仅适用于一个元素，但随后，当我创建第二个实例时，第一个元素将停止正常工作。 Live example

希望大家能帮帮我，谢谢!!

Answer 1

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