ajax - ajax中数量变化时如何更改总价?
问题描述
我使用 jquery 的 append 函数将值传输到另一端。所以我附加输入类型编号,其值自动等于 1。
如果我增加输入类型数字的值,如果我增加数字的值,价格如何翻倍?
刀
@foreach($service->invoices as $invoice)
<tr>
<td class="text-right">{{ $invoice->description }}</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">{{ $invoice->price }}
<td class="total"></td>
</tr>
@endforeach
脚本.js
<script>
$('.amount > input[type="number"]').on('input', updateTotal);
function updateTotal(e){
var amount = parseInt(e.target.value);
if (!amount || amount < 0)
return;
var $parentRow = $(e.target).parent().parent();
var cost = parseFloat($parentRow.find('.cost').text());
var total = (cost * amount).toFixed(2);
$parentRow.find('.total').text(total);
}
</script>
css
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 2px solid #ddd;
display: inline-flex;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline:none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
width: 1rem;
height: 2px;
background-color: #212121;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
font-family: sans-serif;
max-width: 5rem;
padding: .5rem;
border: solid #ddd;
border-width: 0 2px;
text-align: center;
}
我的输入号码是这样的。
解决方案
您可以使用click
和input
事件来实现上述。我已删除updateTotal
功能并将所有代码合并为一个。在下面的代码中,我$(this).closest('tr')
用来获取按钮或输入框所在的最近的 tr ,然后我.find
用来从输入中获取 require 值,最后将 total 添加到.total
td 。
演示代码:
//when - or + click or qty input
$(".minus , .plus , .quantity").on("click input", function() {
var selectors = $(this).closest('tr'); //get closest tr
var quan = selectors.find('.quantity').val(); //get qty
if (!quan || quan < 0)
return;
var cost = parseFloat(selectors.find('.cost').text());
var total = (cost * quan).toFixed(2);
selectors.find('.total').text(total); //add total
})
nput[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 2px solid #ddd;
display: inline-flex;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline: none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
width: 1rem;
height: 2px;
background-color: #212121;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
font-family: sans-serif;
max-width: 5rem;
padding: .5rem;
border: solid #ddd;
border-width: 0 2px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="text-right">A</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<!--just add minus class-->
<button class="minus" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">13
<td class="total"></td>
</tr>
<tr>
<td class="text-right">B</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<button class="minus" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">135
<td class="total"></td>
</tr>
</table>
推荐阅读
- c# - 在 Microsoft Bot v4 中设置 ConfirmPrompt 的尝试次数
- f# - F#:返回索引处元素已更改的列表
- c# - System.Data.SqlClient.SqlException (0x80131904)) 将数据或时间从字符转换为字符串
- mysql - 为什么 innodb 中的分区表不支持外键?
- javascript - 遍历一个 prop,但按不同的 prop React JS 排序
- reactjs - 'System.import' 的替代品
- sas - 可以在 SAS 中找到与整个库中唯一 ID 关联的最小和最大日期吗?
- javascript - .findIndex() 是 JavaScript 中的高阶函数吗?
- python-3.x - 运行 SegNet 的 runtest(caffe 的修改版本)时,如何解决 InternalThreadTest 的 2 个测试中的分段错误(核心转储)错误?
- ffmpeg - 使用 ffmpeg 转换 MXF 失败