javascript - JQuery 从价格中添加/减去按钮的值

Question

我有一系列带有价格值的按钮。我想从 s span.quote-price 中的总值(value)中添加/减去按钮值。

下面的代码运行良好并且总计了价格，但我想尽可能地对其进行调整，以便如果未选择按钮或没有选择类别，则不会添加数字。

目前，即使取消选择该按钮，价格也会不断增加。感谢您的帮助。

var theTotal = 0;

$('button').click(function() {
  theTotal = Number(theTotal) + Number($(this).val());
  $('span.quote-price').text("£" + theTotal.toFixed(2));
});

$('select').click(function() {
  theTotal = Number(theTotal) + Number($(this).val());
  $('span.quote-price').text("£" + theTotal.toFixed(2));
});

$('button#reset').click(function() {
  $('span.quote-price').html("£0.00");
});

$('span.quote-price').text("£" + theTotal.toFixed(2));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="package_1" value="10.00" name="package_1">Package 1</button>
<button id="package_2" value="20.00" name="package_1">Package 2</button>
<button id="package_3" value="30.00" name="package_1">Package 3</button>

<p><span class="quote-price">0.00</span>
</p>

Answer 1

如果有一个函数来计算在 button 或 select 元素的状态更改时调用的总数，这将是一个更简单的模式。试试这个:

function updateTotal() {
    var total = 0;
    $('button.selected').each(function() {
        total += parseFloat($(this).val());
    });
    total += parseFloat($('select').val());
    $('span.quote-price').text("£" + total.toFixed(2));
}

$('button').click(function() {
    $(this).toggleClass('selected');
    updateTotal();
});
$('select').change(updateTotal);

Working example