2

我正在尝试制作一个表格，客户可以选择牧师并根据牧师人数自动显示成本。为此，我使用了 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);

});

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

我怎样才能只显示最后一个？

4

3 回答 3

4

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

而不是使用appenduse text：

$('.total_cost').text(totalCharge);
于 2018-08-08T07:52:27.840 回答
2

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

  1. 文本（）：$('.total_cost').text("iota")
  2. html() :$('.total_cost').html("iota")

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

于 2018-08-08T07:56:41.833 回答
0

使用 html(totalCharge) 而不是 append(totalCharge)

于 2018-08-08T07:54:16.030 回答