计算数量和价格输出jQuery [英] calculate quantity and price output jquery
本文介绍了计算数量和价格输出jQuery的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我可以通过数量和数量显示价格吗?当我在其输入文本中输入数字时 这是我的负号和加号的js代码,其输入类型为文本
Is there a way for me to display the price by its number of qty & when i input a number in its input text Here is my js code for minus and plus symbol with its input type text
我的输入文字
$(".input-number").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
这是html代码& js
Here is the html code & js
我想按数量显示价格
<h3 class>Total : </h3
I would like to display the price by its qty in my
<h3 class>Total : </h3
$('.btn-number').click(function(e) {
e.preventDefault();
fieldName = $(this).attr('data-field');
type = $(this).attr('data-type');
var input = $("input[name='" + fieldName + "']");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if (type == 'minus') {
if (currentVal > input.attr('min')) {
input.val(currentVal - 1).change();
}
if (parseInt(input.val()) == input.attr('min')) {
//$(this).attr('disabled', true);
}
} else if (type == 'plus') {
if (currentVal < input.attr('max')) {
input.val(currentVal + 1).change();
}
if (parseInt(input.val()) == input.attr('max')) {
// $(this).attr('disabled', true);
}
}
} else {
input.val(0);
}
});
$('.input-number').focusin(function() {
$(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {
minValue = parseInt($(this).attr('min'));
maxValue = parseInt($(this).attr('max'));
valueCurrent = parseInt($(this).val());
name = $(this).attr('name');
if (valueCurrent >= minValue) {
$(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
} else {
alert('Sorry, the minimum value was reached');
$(this).val($(this).data('oldValue'));
}
if (valueCurrent <= maxValue) {
$(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
} else {
alert('Sorry, the maximum value was reached');
$(this).val($(this).data('oldValue'));
}
});
$(".input-number").keydown(function(e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group col-xs-2">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number" data-type="minus" data-field="quant[2]">
<span class="fa fa-minus"></span>
</button>
</span>
<input type="text" name="quant[2]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number" data-type="plus" data-field="quant[2]">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
<h3 class="bookingroom">Total: PHP 2,750.00</h3>
推荐答案
您可以尝试在h3标签中编辑文本.将其放在您的输入onChange函数中.
You can try editing text in h3 tag. Put this in your input onChange function.
$('.input-number').change(function() {
// previous code...
let initialValue = $(this).data('price');
let price = valueCurrent * initialValue;
$('h3.bookingroom').text('Total: ' + price);
});
您可以从h3之前的文本中获取初始值,或者更好的主意是添加带有输入价格的数据标签
You can get initial value from h3 previous text or a better idea is to add a data tag with the price the input
<input type="text" class="form-control input-number"
name="quant[2]"
value="1"
min="1"
max="10"
data-price="2750" />
这篇关于计算数量和价格输出jQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文