我需要始终填满#totalcost。有一些 JavaScript 计算,结果写入#total cost。我尝试将其放在 JSFiddle 上,但触发函数 onload 没有成功。对于 .number 输入字段的每次更改,.localTotal 都会设置为 localTotal * 数值。用两个词来说,我需要 .localTotal 和 #totalcost 始终被填充
.localTotal 包含 .price*.quantity 和 #totalcost 包含所有 .localTotals 的总和
这是 HTML
<div class="row"> <div class="col-xs-5">
<span class="glyphicon glyphicon-remove remove" style="cursor:pointer;"></span> Ventura L15220</div>
<div class="col-xs-3 price">2020.20</div>
<div class="col-xs-4"><input type="number" class="form-control quantity" value="1"></div>
<div class="localTotal"></div></div>
<div class="row">
<div class="col-xs-5"><span class="glyphicon glyphicon-remove remove" style="cursor:pointer;"></span> Ventura L15220</div>
<div class="col-xs-3 price">30300.20</div><div class="col-xs-4"><input type="number" class="form-control quantity" value="1"></div>
<div class="localTotal"></div></div>
<div class="col-xs-4 head " id="totalcost"></div>
和 JavaScript
function changeQuantity(){
$(".quantity").trigger("change");
console.log("done")
$('.quantity').change(calculateTotal);
function calculateTotal(){
$quantity=$(this);
$price=$quantity.closest('.row').find('.price').text();
$quantityValue=$quantity.val();
$localTotal=$quantity.closest('.row').find('.localTotal');
$localTotalValue=$quantityValue*$price;
$quantity.closest('.row').find('.localTotal').text($localTotalValue);
console.log($localTotalValue);
var sumToTotal = 0;
var totalSum=document.getElementById('totalcost');
$('.localTotal').each(function(){
sumToTotal += parseFloat($(this).text());
});
totalSum.innerHTML=sumToTotal+' грн';
}
}
changeQuantity() 在加载时被触发,但尽管 $(".quantity").trigger("change"); #totalcost 和 .localTotal 未填充:c
最佳答案
我认为你把事情搞混了。您在 .quantity
上绑定(bind)了更改事件,但在 .number
上触发了更改事件。我也不知道为什么,但为什么你要混合 jQuery 选择器和“普通”选择器?
我不确定你到底想做什么,但它的工作原理如下:
$(".quantity").on('change', function() {
/*
* Your code
* replace your 'getElementById('total cost') => $("#totalcost")
* replace your 'totalSum.innerHTML' => totalSum.text(sumToTotal + ' грн');
*/
});
现在,当 .quantity
更改时,您的回调将被触发。这可以通过手动触发更改事件来完成:$('.quantity').trigger('change');
另外,我不确定你所说的“总是填满”是什么意思。我认为我们缺少一些上下文:)
编辑
我希望你不介意,但我稍微重构了你的代码
$(".quantity").on('change', function() {
var context = $(this).closest('.row');
// Calculate amount
var amount = parseFloat(context.find(".price").text()) * parseFloat($(this).text());
// Set the amount
context.find('.localTotal').text(amount);
var total = 0;
$('.localTotal').each(function(el) {
total += parseFloat($(this).text());
});
$("#totalcost").text(total);
});
关于javascript - 计算并触发onchange并将结果写入html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20169768/