Question

我正在使用jquery计算在我的一个客户端页面上进行求和。简单的计算工作正常，但我必须使用输入标记集成添加和删除按钮。而不是手动输入数字客户端想要使用添加和删除按钮来增加和减少产品的价值，并最终累加到totalSum。

希望有人可以帮助我，因为我还不是jquery的专家。：）

此处为HTML代码

<div class="amount">    
            <input type="text" class="count"  name="totalSum" id="totalSum" value="" size="2" readonly="readonly">                      </div>



    <div class="clearfix"></div><!--Please do not delete this div-->
    <!--Case 1-->       
    <div class="bottle_in_case">
                <div class="addRemove">
                <input type="text" value="2" class="count" maxlength="2" name="case" id="case_1"> bottles
                <p class="add_remove_btns"><a href="#"><img src="images/add.gif" alt=""> Add</a> / <a href="#"><img src="images/remove.gif" alt=""> Remove</a></p>
            </div>
    </div>

    <!--Case 2-->       
    <div class="bottle_in_case">

        <div class="addRemove">
                <input type="text" value="2" class="count" maxlength="2" name="case" id="case_2"> bottles
                <p class="add_remove_btns"><a href="#"><img src="images/add.gif" alt=""> Add</a> / <a href="#"><img src="images/remove.gif" alt=""> Remove</a></p>
            </div>
    </div>

    <!--Case 3-->       
    <div class="bottle_in_case last">

            <div class="addRemove">
                <input type="text" value="2" class="count" maxlength="2" name="case" id="case_3"> bottles
                <p class="add_remove_btns"><a href="#"><img src="images/add.gif" alt=""> Add</a> / <a href="#"><img src="images/remove.gif" alt=""> Remove</a></p>
            </div>
    </div>

我使用的脚本是

$("input[name^='case']").sum();

$（“input [name ^ = case]”）。sum（“keyup”，“#totalSum”）;

提前致谢

NEHA

Answer 1

使用jquery进行简单计算

    <table id="table" border="0">
        <thead>
            <th>Price</th><th>Quantity</th><th>Total</th>
        </thead>
    <tbody>
    <tr>
        <td><input id ="price" type = "text"></input></td>
        <td><input id ="quantity" type = "text"></input></td>
        <td><input id ="total" type = "text"></input></td>
    </tr>
    </tbody>
    </table>

<a href="#" id="calc">Calculate</a>

Jquery功能：

$(function(){
    $('a#calc').click(function(){
    var q = $('input#quantity').val();
    var p = $('input#price').val();
    var tot = (q*p);
    $('input#total').val(tot);
    });
 });

我希望对你有所帮助

Answer 2

首先要做的事情是：将数量更换器附加到add.gif和remove.gif：

<p class="add_remove_btns"><a href="#"><img src="images/add.gif" alt=""> Add</a> / <a href="#"><img src="images/remove.gif" alt=""> Remove</a>

将上述所有实例更改为

<p class="add_remove_btns"><a href="#" class="add_qty" rel="1"><img src="images/add.gif" alt=""> Add</a> / <a href="#" class="remove_qty" rel="1"><img src="images/remove.gif" alt=""> Remove</a>

当然，rel =“1”或rel =“2”的每个实例都必须与id =“case_1”的数字相对应...

现在在jQuery中（运行文档就绪语法）

$('add_qty').each(function(){
  $(this).click(function() {
    var target = $(this).attr('rel');
    var newqty = $('#case_'+target).val()+1;
    $('#case_'+target).val(newqty);
    recalculate_total();
    return false;
  });    
});

$('remove_qty').each(function(){
  $(this).click(function() {
    var target = $(this).attr('rel');
    var newqty = $('#case_'+target).val()-1;
    if(newqty<0) {newqty=0;} // qty cannot be below 0, so override to 0 if thats the case
    $('#case_'+target).val(newqty);
    recalculate_total();
    return false;
  });    
});

要获取所有行的总和，请在文档就绪语法外创建此函数：

 function recalculate_total() {
    var total = 0;
    $('input.count').each(function(){
    total = total+$(this).val()*1;
    });
    $('#totalSum').val(total);
    }

如果有效，请告诉我..我也提供了一个网址，以便在出现错误时进行排查。

Jquery计算

2 个答案: