Question

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

下面的代码效果很好并总计价格，但是如果可能的话我想调整它，这样如果没有选择按钮或者没有选择一个类，那么这个数字就不是。补充说。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

这样的事情？我添加了课程.selected css，以便您可以跟踪总计和不计算的内容

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

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

＆＃13;

$(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));
});

＆＃13;

.selected {
    color: blue;
}

＆＃13;

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

＆＃13;

Answer 3

只需为班级添加一个切换，为amout添加一个切换。这应该可以解决问题。

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从价格中添加/减去按钮的值

3 个答案: