admin 管理员组文章数量: 1087139
2024年3月19日发(作者：java程序设计教程航空工业出版社答案)
bootstrap加减数量操作
要实现一个加减数量的操作，可以使用Bootstrap的输入框组件结合自定义的
按钮或者图标来实现。
步骤如下：
1. 首先，在HTML中添加输入框组件和加减按钮或图标的标记。
html
input-number" value="1" min="1" max="10">
2. 使用JavaScript或jQuery来实现点击按钮时增加或减少数量的功能。
javascript
('.btn-number').click(function(e){
tDefault();
var fieldName = (this).attr('data-field');
var type = (this).attr('data-type');
var input = ("input[name='"+fieldName+"']");
var currentVal = parseInt(());
if (!isNaN(currentVal)) {
if(type == 'minus') {
if(currentVal > ('min')) {
(currentVal - 1).change();
}
if(parseInt(()) == ('min')) {
(this).attr('disabled', true);
}
} else if(type == 'plus') {
if(currentVal < ('max')) {
(currentVal + 1).change();
}
if(parseInt(()) == ('max')) {
(this).attr('disabled', true);
}
}
} else {
(0);
}
});
('.input-number').focusin(function(){
(this).data('oldValue', (this).val());
});
('.input-number').change(function() {
var minValue = parseInt((this).attr('min'));
var maxValue = parseInt((this).attr('max'));
var valueCurrent = parseInt((this).val());
if(valueCurrent >= minValue) {
(".btn-number[data-type='minus']").removeAttr('disabled');
} else {
alert('Sorry, the minimum value was reached');
(this).val((this).data('oldValue'));
}
if(valueCurrent <= maxValue) {
(".btn-number[data-type='plus']").removeAttr('disabled');
} else {
alert('Sorry, the maximum value was reached');
(this).val((this).data('oldValue'));
}
});
(".input-number").keydown(function (e) {
if (.inArray(e, [46, 8, 9, 27, 13, 190]) !== -1
(e === 65 && (y === true y ===
true))
(e >= 35 && e <= 40)) {
return;
}
if ((ey (e < 48 e > 57)) &&
(e < 96 e > 105)) {
tDefault();
}
});
以上代码会实现输入框的增减功能，并对输入框做了最小值和最大值的限制，超
出范围时会弹出提示。
版权声明：本文标题：bootstrap加减数量操作 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1710795496a573517.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论