订单形式使用jQuery插件计算可变价格

Question

问候，

我试图代码使用优秀calculation plugin的订单价格计算的解决方案。我的表单有两种不同的价格，一种是10以下的数量，另一种是数量超过这个数量的价格。

这是我到目前为止的代码：

$(document).ready(function() { 

    // bind the recalc function to the quantity fields 
    $("input[name^=qty_item_]").bind("keyup", recalc); 
    // run the calculation function now 
    recalc(); 

    function recalc() { 

     var quantity = $("input[name^=qty_item_]").val(); 
     var quantity_int = parseInt(quantity_str); 
     var threshold = 10; 
     if (quantity_int < threshold) { 
      var useprice = $("[id^=price_item_1_]"); 
     } else { 
      var useprice = $("[id^=price_item_2_]"); 
     } 

     $("[id^=total_item_]").calc(

      // the equation to use for the calculation 
      "qty * price", 
      // define the variables used in the equation, these can be a jQuery object 
      { 
       qty: $("input[name^=qty_item_]"), 
       price: useprice 
      }, 
      // define the formatting callback, the results of the calculation are passed to this function 
      function (s){ 
       // return the number as a dollar amount 
       return "$" + s.toFixed(2); 
      }, 
      // define the finish callback, this runs after the calculation has been complete 
      function ($this){ 
       // sum the total of the $("[id^=total_item]") selector 
       var sum = $this.sum(); 
       $("#grand_total").text(
        // round the results to 2 digits 
        "$" + sum.toFixed(2) 
       ); 
      } 

     ); 

    } 

}); 

已经很接近了，但它被设置为外地阵列中的第一项的值useprice停留。我想我需要将用量计算'在循环内部'以某种方式，但我坚持如何。

更新：Demo page here。

按照惯例，任何&所有帮助感激地收到。 TIA :)

Answer 1

我对你的代码做了一些修改。似乎现在工作。主要更改是仅重新计算已更改的行，而不是每次重新计算每行。当然，总数仍然是从所有总数中计算出来的。我还使用事件委托来最小化绑定的事件处理程序，这会影响大型表的性能和资源使用情况。

jQuery(
    function($) 
    { 
     // threshold that defines at what quantity to use the discounted price 
     var discountThreshold = 10; 

     // bind the recalc function to the quantity fields 
     // use event delegation to improve performance 
     $("#frmOrder") 
      .delegate(
       "input[name^=qty_item_]", 
       "keyup", 
       recalc 
      ); 

     // run the calculation function once on every quantity input 
     $("input[name^=qty_item_]").trigger("keyup"); 

     // recalculate only the changed row (and the grand total) 
     function recalc(e) { 
      // input field that triggered recalc() 
      var 
       $this = $(this), 
       $parentRow = $this.closest('tr'), 
       quantity = $this.parseNumber()[0], 
       $usePrice = ((discountThreshold <= quantity) ? $("[id^=price_item_2_]", $parentRow) : $("[id^=price_item_1_]", $parentRow)) || 0; 

      // recalculate the row price 
      $("[id^=total_item_]", $parentRow).calc(
       // the equation to use for the calculation 
       "qty * price", 
       // define the variables used in the equation, these can be a jQuery object 
       { 
        qty: $this, 
        price: $usePrice 
       }, 
       // define the formatting callback, the results of the calculation are passed to this function 
       function (s){ 
        // return the number as a dollar amount 
        return "$" + s.toFixed(2); 
       }, 
       // define the finish callback, this runs after the calculation has been complete 
       function ($that){ 
        // sum the total of the $("[id^=total_item]") selector 
        var sum = $("[id^=total_item_]").sum(); 
        $("#grand_total").text(
         // round the results to 2 digits 
         "$" + sum.toFixed(2) 
        ); 
       } 
      ); 
     } 
    } 
);