Working Demo

Question

如果单击按钮，我试图总结按钮的值。例如，有＆＃34; Button1＆＃34;。如果单击此按钮，则应将其值添加到将显示在页面底部的总和。如果＆＃34; Button1＆＃34;第二次点击它应该从总和中减去它的值。

我试图这样做，但它根本没有做任何事情：

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

此外，这里是示例按钮的代码（如＆＃34; Button1＆＃34;）：

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

我已经遍布Stackoverflow以及谷歌等搜索过但我无法找到任何有类似问题的人或其他任何人

Answer 1

阻止JS逻辑错误在这里：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

第14行和第15行需要放在按钮的click事件中，以便在每次点击时更新value_sum输入。您也可以选择值属性。使用jQuery返回按钮的value属性的方法是：

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

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

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

根据需要添加任意数量的按钮，唯一的事情是您必须向它们添加数据值以确定要添加或减少的数量。我也会使用类而不是＆＃34;按钮＆＃34;来搜索按钮。但这取决于你。

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

此处为所有按钮添加了一个类名“添加”，在您使用有效，无效类

的情况下单击其切换类添加，子

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中添加按钮的值

5 个答案:

Working Demo