JQuery add/subtract 价格按钮的值

Question

我有一系列带有价格值的按钮。我想从 s span.quote-price 中的总值中 add/subtract 按钮值。

下面的代码运行良好并且合计了价格，但我想尽可能对其进行调整，以便如果未选择按钮或未选择 class，则该数字不是' t补充道。

目前，即使取消选择按钮，价格也会继续增加。谢谢你的帮助。

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

像这样的？我添加了 class .selected css 这样您就可以跟踪哪些内容加起来了，哪些没有加起来

功能大致如下（仅对 $(button).click() 功能进行了更改： - 如果单击的按钮有 class .selected，则从总数中减去值，然后删除 class。

-如果点击的按钮没有class .selected，则将值添加到total并添加class.

$(document).ready(function() {
    var theTotal = 0;

    $('button').click(function() {
        console.log($(this).hasClass('selected'));
        if($(this).hasClass('selected')) {
            theTotal = Number(theTotal) - Number($(this).val());
            $(this).removeClass('selected');
        }
        else {
            theTotal = Number(theTotal) + Number($(this).val());
            $(this).addClass('selected');
        }
        $('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));
});

.selected {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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 2

如果有一个函数来计算在 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

Answer 3

只需为 class 和金额添加一个切换。这应该可以解决问题。

var theTotal = 0;

$('button').click(function() {
  theTotal = Number(theTotal) + Number($(this).val());
  $('span.quote-price').text("£" + theTotal.toFixed(2));
  $(this).toggleClass('selected');
  $(this).attr("value", ($(this).val() * -1));
});

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

button.selected { color: blue; }

<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>

我已经删除了脚本中与您的问题无关的部分。

JQuery add/subtract 价格按钮的值

JQuery add/subtract value of button from price

javascript

jquery

var

function