jquery - 获取 span 的当前值

Question

现在，在选择复选框时，它会添加指定的价格，但在取消选择时不会减去。如何正确检查数量，$('.amount')然后进行正确的数学运算？

我在这里做了一个小提琴来展示我正在使用的东西。

$(':checkbox').change(function(){
    var amount = $('.amount').html();
    sum = Number(amount.replace(/[^0-9\.]+/g,""));
    var names = $(':checked').map(function(){
        sum += (this.value - 0);
        return this.name;
    }).get().join(',');
    $('span.amount').text('$' + sum);
    spans[1].innerHTML = sum;
});

Answer 1

如何跟踪原始金额，然后始终从该金额开始，如下所示：

var originalAmount = Number($('.amount').html().replace(/[^0-9\.]+/g,""));

$(':checkbox').change(function(){
    var sum = originalAmount;
    // The rest of the code stays the same.

更新了 jsfiddle

编辑：我忘了指出我在“sum”前面添加了“var”，所以它是一个局部变量。

Answer 2

我不确定为什么每次都需要遍历所有复选框。
使用您现有的逻辑，您将继续添加已添加的金额。

在您当前的代码中，当单击它添加的第一个复选框时，99.99正如预期的那样，但是当单击之后的第二个复选框时，它会添加199.98. 99.99从第一个99.99到第二个，导致总数不正确。

我认为您可以通过仅使用当前单击的值来简化此操作。这也将通过不重新评估已处理的复选框来节省冗余，类似于：

$(':checkbox').change(function(){
    var sum = $('.amount').html();
    sum = Number(sum.replace(/[^0-9\.]+/g,""));

    if(this.checked){
        sum += Number(this.value);
    } else {
        sum -= Number(this.value);
    }

    $('span.amount').text('$' + sum);
    spans[1].innerHTML = sum;
});

---

演示- 每次点击使用单笔金额扣除/添加

---

Answer 3

它可以很简单，我希望这可以帮助

吻 Keep It Simple Silly

$(':checkbox').change(function(){
var amount = $('.amount').html();

amount = amount.substring(1);
var pre = parseFloat(amount); 

if ($(this).is(':checked')) {

   pre += parseFloat($(this).val()); 


} else {
    pre -= parseFloat($(this).val()); 
}
amount = pre; 


$('span.amount').text('$' + amount);
});

http://jsfiddle.net/XSCZ3/15/

我希望这可以帮助