如何将 jquery 中的按钮值相加

Question

如果单击按钮，我会尝试汇总按钮的值。例如，有"Button1"。如果单击此按钮，它应该将其值添加到将显示在页面底部的总和中。如果 "Button1" 被第二次点击，它应该从总和中减去它的值。

这是我的尝试，但它根本没有做任何事情：

var value_Buttons = 0;
var total = 0;

$("button[name=Button1],[name=Button2],[name=Button3],[name=Button4],[name=Button5],[name=Button6]").click(function() {
    if($(this).hasClass('active') == false) {
        value_Buttons += parseInt($(this).val());
    } else if($(this).hasClass('active') == true) {
        value_Buttons -= parseInt($(this).val());
    }
    total += value_Buttons;
    alert(total);
});

total = value_Buttons + value_Optional_Button;
$("input[name=value_sum]").val(total);

此外，这里是示例按钮的代码（如 "Button1"）：

<div class="form-group col-md-2">
    <button type="button" class="form-control btn btn-primary" name="Button1" value="300" title="300 €" data-toggle="button" aria-pressed="false" autocomplete="off">Button 1</button>
</div>

将会有更多按钮，但它们只是名称和值不同。

此外，显示按钮值总和的框当前如下所示：

<div>
    <label class="control-label">Sum</label>
    <div class="input-group">
        <input class="form-control" name="value_sum" style="text-align:right" id="costs" value="" type="text" readonly>
        <span class="input-group-addon">€</span>
    </div>
</div>

我已经在整个 Whosebug 以及 Google 等平台上进行了搜索，但我找不到任何东西或任何有类似问题的人

Answer 1

阻塞JS逻辑错误在这里：

$("input[name=value_sum]").val(total);

这一行应该在上面的代码块中。添加了减法更正：

var total = 0;

$("button[name]").on("click", function() {
    
    if(!$(this).hasClass('active')) {
        total += Number($(this).val());
        $(this).addClass('active').html("remove " + $(this).attr("title"));
    } else {
        total -= Number($(this).val());
        $(this).removeClass('active').html("add " + $(this).attr("title"));
    }
    
    $("input[name=value_sum]").val(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-2">
    <button type="button" class="form-control btn btn-primary" name="Button300" value="300" title="300 €" data-toggle="button" aria-pressed="false" autocomplete="off">add 300 €</button>
    <button type="button" class="form-control btn btn-primary" name="Button600" value="600" title="600 €" data-toggle="button" aria-pressed="false" autocomplete="off">add 600 €</button>
</div>
<div>
    <label class="control-label">Sum</label>
    <div class="input-group">
        <input class="form-control" name="value_sum" style="text-align:right" id="costs" value="0" type="text" readonly>
        <span class="input-group-addon">&euro;</span>
    </div>
</div>

Answer 2

第 14 行和第 15 行需要放在按钮的单击事件中，以便在每次单击时更新 value_sum 输入。另外，您对 value 属性的选择有点偏离。 return按钮的值属性使用jQuery的方法是：

$(this).attr('value');

所以在这两点之后，剥离 if 和 else 检查的代码，并使用更清晰的方法选择按钮，您应该有这样的东西：

var total = 0;

$("button[name=Button1], button[name=Button2], button[name=Button3], button[name=Button4], button[name=Button5], button[name=Button6]").click(function() {
    total += $(this).attr('value');
    $("input[name=value_sum]").val(total);
});

要在页面加载时的输入元素中显示总数，即 0，您可以使用：

<input class="form-control" name="value_sum" style="text-align:right" id="costs" value="0" type="text" readonly>

Answer 3

首先为将应用于所有按钮的 class 创建一个侦听器。

$(.btn).click(function() {
  //get value
  var value = parseint($(this).attr("value"));
  //check if already clicked
  if($(this).hasClass('active') {
    //set value of total
    total = total - value;
    //remove class active
    $(this).removeClass('active');
  }else {
    //set value of total
    total = total + value;
    //addclass active
    $(this).addClass('active');
  }
)};

这是你需要的吗？

Answer 4

检查此 fiddle。

添加任意数量的按钮，唯一的问题是您必须向它们添加数据值以确定要添加或减去多少。我也会使用 class 而不是 "button" 来搜索按钮，但这取决于你。

var buttons = {};
$("button").each(function (index, item) {
    buttons[index] = 0;
    $(item).click(function () {
        var value = +($(item).data("value")),
            val = +($("#costs").val());

        val += (!buttons[index]) ? value : -value;
        buttons[index] = (!buttons[index]) ? 1: 0;

        $("#costs").val(val);
    });
});

希望对您有所帮助。

Answer 5

Working Demo

这里为所有按钮添加了一个class名称'add'，点击它的开关class add, sub in you case you使用 活动，不活动 class

var total = 0;
$("button[name=button1],[name=button2],[name=button3]").on('click', function () {
    var self = $(this);
    var gValue = Number(self.val());
    if (self.hasClass("add")) {
        total += gValue;
        self.removeClass("add").addClass("sub");
    } else {
        total -= gValue;
        self.removeClass("sub").addClass("add");
    }
    $("#costs").val(total);
});

如何将 jquery 中的按钮值相加

How do I add up values of buttons in jquery

javascript

jquery

Working Demo