如何在 jQuery 中获取表单费用的最后一个值

Question

我正在尝试制作一个表格，客户可以在其中选择牧师并根据牧师编号自动显示费用。因此，为此，我使用了 jQuery 表单更改函数并计算函数内部的成本。我的所有逻辑都工作正常，但问题是增加数量然后显示多个成本。

外观：

总是我想显示最后一个/更新的

吹爆我的代码：

var adultsSingleChage = 200;
var childrenSingleCharge = 100;
var infantsSingleCharge = 50;


$('#absbt_form input').change(function(){
    var adults = $("#absbt_adults").val();
    var adultsCharge = adults * adultsSingleChage;

    var children = $("#absbt_children").val();
    var childrenCharge = children * childrenSingleCharge;

    var infants = $("#absbt_infants").val();
    var infantsCharge = infants * infantsSingleCharge;

    var totalCharge = adultsCharge + childrenCharge + infantsCharge;

    console.log(totalCharge);


    $('.total_cost').append(totalCharge);

});

我知道我做了最大的逻辑，但对于最后一个逻辑，我很困惑。

如何只显示最后一个？

Answer 1

append 向现有内容添加新内容 - 这就是具有先前值的原因。

而不是使用 append 使用 text:

$('.total_cost').text(totalCharge);

Answer 2

使用html(totalCharge) 而不是追加(totalCharge)

Answer 3

问题出在您的代码 appending 上，这意味着您是将文本添加到元素中而不是替换它。您可以使用以下两种方法：

text(): $('.total_cost').text("iota")
html(): $('.total_cost').html("iota")

注意：使用 id 选择器或与 class 一起使用 $($('.total_cost')[0])

如何在 jQuery 中获取表单费用的最后一个值

How can get last value of form charge in jQuery

javascript

forms

jquery

onchange

jqueryform