0
我是Jquery插件的新手，我仍然试图弄清楚如何让我的插件在多个元素下工作，在搜索网络上的教程和问题之后，我意识到插件编码依赖于很多你的插件是关于什么的，因此可能很难找到特定解决方案的模板。多个元素的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
希望你们能帮助我，谢谢！
通常的方式具有多个元件的工作是把所有的这样的代码在一个循环内：'this.each（函数（指数，元素）{您的方法这里代码}）'所以它迭代集合中的每个项目。 – jfriend00
不确定我是否理解，我应该在哪里使用'each'，以及如何处理'index'和'element'？ –
我正准备在'this.each（）'循环中发布一个代码体，但是你的代码不能用于多个元素，因为你插入了'
'，你只能这样做一次，因为你不能有多个具有给定ID的元素。因此，您的代码不会被设计为多次使用，而无需重新设计。 – jfriend00