JQuery从价格中添加/减去按钮的值答案

【问题标题】：JQuery add/subtract value of button from priceJQuery从价格中添加/减去按钮的值
【发布时间】：2015-10-01 12:37:45
【问题描述】：

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

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

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

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>

【问题讨论】：

您能否展示您的 HTML 和/或工作示例？
使用复选框代替按钮是否适合您的目的？
不幸的是，我需要按钮，用于样式设置。我已经更新了 html - 感谢您的帮助。

标签： javascript jquery function var

【解决方案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

【讨论】：

这很好用 - 谢谢。但是，这个 '$('select').change(updateTotal);'我的多选菜单似乎不起作用。我如何将这个位调整为 5 个选择菜单？
这个问题是因为多个选择菜单以逗号分隔的字符串形式提供值，例如10.00,20.00，它不能被解析为浮点数。您需要 split() 该字符串并在另一个循环中将每个值相加。
像这样...总计 += parseFloat($('select#1').val()); $('span.quote-price').text("£" + total.toFixed(2));} 总计 += parseFloat($('select#2').val()); $('span.quote-price').text("£" + total.toFixed(2));} total += parseFloat($('select#3').val()); $('span.quote-price').text("£" + total.toFixed(2));}

【解决方案2】：

像这样？我添加了 .selected css 类，这样您就可以跟踪总计中的内容和未添加的内容

功能几乎是这样的（仅对$(button).click() 函数进行了更改： - 如果单击的按钮具有类.selected，则从总数中减去值，然后删除类。

-如果单击的按钮没有类.selected，则将值添加到总数并添加类。

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

【讨论】：

【解决方案3】：

只需为类添加一个切换开关，为数量添加一个切换开关。这应该可以解决问题。

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>

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

【讨论】：