Javascript 如何在jquery中添加按钮的值

如果点击按钮，我试图总结按钮的值。例如，有“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”）的代码：

按钮1

将会有更多的按钮，但它们只会在名称和值上有所不同

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

<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">&euro;</span>
    </div>
</div>

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

总和
&欧元；

---

我已经搜索了Stackoverflow的所有地方，也通过Google等搜索了。但是我找不到任何有类似问题的人或任何人。

阻塞JS逻辑错误在这里：

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

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

var总计=0；
$（“按钮[名称]”）。在（“单击”，函数（）上）{
if（！$（this）.hasClass（'active'））{
总数+=数字（$（this）.val（））；
$（this.addClass（'active'）.html（“删除”+$（this.attr）（“标题”）；
}否则{
总数-=数字（$（this）.val（））；
$（this.removeClass（'active'）.html（“添加”+$（this.attr（“标题”）））；
}
$（“输入[name=value\u sum]”）val（总计）；
});

加300欧元
加600欧元
总和
&欧元；
第14行和第15行需要放在按钮的点击事件中，以更新每次点击时的值总和输入。此外，您对“值”属性的选择也会使其稍微偏离。使用jQuery返回按钮的value属性的方法是：

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

因此，在这两点之后，去掉if和else检查的代码，并用更干净的方法选择按钮，您应该有如下内容：

<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">&euro;</span>
    </div>
</div>

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>

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

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

这就是你需要的吗？
检查一下

添加尽可能多的按钮，唯一的问题是您必须向它们添加数据值，以确定要添加或删除多少。我也会使用类而不是“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);
    });
});

希望能有所帮助。

这里为所有按钮添加了一个类名“add”，在您使用的情况下，单击其切换类添加子类

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

首先用类替换所有按钮标记。它节省了代码，可读性更强。您也可以使用此选项来为按钮提供一些“状态”。按钮要么有类，要么没有类-不需要
else
分支上的
if
子句。您似乎也有一个问题，没有指定如果按钮被按零次或3+会发生什么。正如所写的那样，按零键仍然会使它变成负数，而这个按钮可能应该被完全忽略？在我看来，按零键什么也不做似乎很正常：）如果你点击3次，你可以添加、删除、重新添加（根据OP）@sodawillow当然，除了大多数答案（和问题）只允许两种状态-
class=“active”
，或者不是。对零压不做任何操作需要三种状态。更干净的代码。但如果用户再次单击，则不会删除：）哦，是的！我忙着把它修剪得太细了，忘记了OP关于加减法的观点。所以OP，保持if/else检查在那里！谢谢@sodawillowYeah它看起来很棒。为了澄清，我还将向输入元素“form control”添加值0。虽然数字函数不是必需的，但是还有另一种选择，即
total+=~~$（this.val（）
而不是
total+=Number（$（this.val（））如果OP知道他总是使用整数。一秒钟前完成：）thx，您关于
Number
有点正确，但用户可以在单击之前欺骗html代码中的值：）键入：
var value=parseint（$（this）.arrt（“value”）@sodawillow我修正了，只是打错了。