使用 jquery onkeypress 计算答案

【问题标题】：Calculation using jquery onkeypress使用 jquery onkeypress 计算
【发布时间】：2012-02-06 00:07:29
【问题描述】：

我在 jquery 中有这种类型的练习。去这里http://jsfiddle.net/LAntL/3/

对于Item 1，如果我添加#no of quantity of Size 7，则文本框中应显示multiplied by Item 1's Price，结果应显示在Item 1's Ext文本框中。那么如果我对size 8.5 of Item 1 做同样的事情，它应该执行同样的操作。

但是分机会有(Price x Size 7 Qty) + (Price x Size 8.5 Qty)

Item 2 也会发生同样的情况。与此同时，Total quantity and Total price 将在每个文本框的keypress 事件上更新。

我是 jquery 的初学者，并得到了这个杀戮练习。请帮助某人。

提前致谢。

【问题讨论】：

标签： javascript jquery forms jquery-selectors

【解决方案1】：

我建议您为字段分配一些类，以便 jQuery 可以轻松找到它们：

"lineQty"   - add this class to all the qty fields
"lineTotal" - add this class to all the line total fields
"linePrice" - I think you can see where I'm going with this
"lineExt"   - add to all ext fields

那么下面的.keyup函数会自动更新所有行。

$(document).ready(function() {

    $(".lineQty").keyup(function() {
       // 'this' is the field the user is typing in
       // so find the tr that it belongs to
       var $row = $(this).closest("tr"),
           total = 0,
           // get the price for the current row:
           price = $row.find(".linePrice").val();

        // loop through every qty field for the current row and add
        // the entered value to the total, using unary plus to convert
        // to a number, and a default of 0 if non-numeric data is entered
        $row.find(".lineQty").each(function() {
            total += +this.value || 0;
        });

        // set the total for the current row
        $row.find(".lineTotal").val(total);

        // set the price for the current row
        $row.find(".lineExt").val(total * price);

        // now add up the grand totals
        var grandTotal = 0,
            grandPrice = 0;
         $(".lineTotal").each(function() {
           grandTotal += +this.value || 0;
        });
        $(".lineExt").each(function() {
            grandPrice += +this.value || 0;
        });
        $("[name='data[totalQuantity]']").val(grandTotal);
        $("[name='data[totalPrice]']").val(grandPrice);
    }); 

});

工作演示：http://jsfiddle.net/LAntL/5/（仅适用于第一行，因为我不会费心为您的字段分配类 all - 您需要将我上面谈到的类添加到每个根据我为第一行所做的字段）。

【讨论】：

嘿 nnnnnn，谢谢。我几乎没有对此进行修改以使我的模块正常工作。

【解决方案2】：

好吧，你想学点东西，我就描述一个可能的方法，不给你完成的解决方案。

首先，您应该用class="item" 标记包含项目的表。现在您可以在 jQuery 中编写一个选择器来分别获取每个项目。然后你应该标记所有具有特殊功能的单元格（<td>）。总计、价格、光盘和分机。您的表格应如下所示：

<table class="item">
  <tr>
    <td>...</td>

    <td class="total">...</td>
    <td class="price">...</td>
    <td class="disc">...</td>
    <td class="ext">...</td>
  </tr>
</table>

现在您可以为表格内的所有输入字段编写一个选择器，其类为“item”。

$('.item input').change(function(){});

您可以在此函数内部处理计算。一开始我会建议你拿到这个项目：

$('.item input').change(function(){
   var item = $(this).closest('table.item');
   var totalInput = $(item).find('.total input');
   var priceInput = $(item).price('.price input');
   // ...

   var allWriteableInputs = $(item).find('input[readonly!="readonly"]');

   // do the calculation
   var sum = 0;
   $(allWriteableInputs).each(function(i, input){
       sum += $(input).val();
   });
   $(totalInput).val(sum);
});

如果你走这条路，你不需要：

onkeypress="return isNumberKey(event);" 和
每个输入框的id="product1Total"

我希望这个发人深省的冲动对您有所帮助。你还有很长的路要走，我年轻的学徒;-)

【讨论】：