Question

我有一个计算订单总成本的表单，但是如果一个项目的成本更高，我就无法解释。有人有主意吗？见下面的示例。田野＆amp;计算插件可从here

获得

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="scripts/jquery.field.min.js"></script>
<script type="text/javascript" src="scripts/jquery.calculation.min.js"></script>

<script type="text/javascript">
    $(document).ready(function (){

        function recalc(){ 
            // run the calc() method on each of the "total" fields 
            $("[id^=total_item]").calc( 
                // the equation to use for the calculation 
                "qty * price", 
                // we now define the values for the variables defined in the equation above 
                { 
                    // instead of using a static value, we use a jQuery object which grabs all the quantities 
                    qty: $("input[name^=qty_item_]"), 
                    // now we define the jQuery object which reads in the "price" from the table cell 
                    price: $("[id^=price_item_]") 
                }, 
                // this function is execute after the calculation is completed, which allows us to 
                // add formatting to our value 
                function (s){ 
                    // return the number as a dollar amount 
                    return "$" + s.toFixed(2); 
                }, 
                // once all calculations are completed, we execute the code below 
                function ($this){ 
                    // now we get the sum() of all the values we just calculated 
                    var sum = $this.sum(); 

                    // now that we have the grand total, we must update the screen 
                    $("#grandTotal").text( 
                        // round the results to 2 digits 
                        "$" + sum.toFixed(2) 
                    ); 
                } 
            ); 
        }

        // bind the recalc function to the quantity fields 
        $("input[name^=qty_item_]").bind("keyup", recalc);
    });
</script>
<!--
        <input type="text" name="qty_item_1" id="qty_item_1" value="1" size="2" /> 
        <input type="text" name="qty_item_2" id="qty_item_2" value="1" size="2" /> 
-->
</head>

<body>
<table width="500"> 
<col style="width: 50px;" /> 
<col /> 
<col style="width: 60px;" /> 
<col style="width: 110px;" /> 
<tr> 
    <th> 
        Qty 
    </th> 
    <th align="left"> 
        Product 
    </th> 
    <th> 
        Size 
    </th> 
    <th> 
        Price 
    </th> 
    <th> 
        Total 
    </th> 
</tr> 
<tr> 
    <td align="center">
        <input type="text" name="qty_item_1" id="qty_item_1" size="2" />
    </td> 
    <td> 
        Shirt 
    </td> 
    <td>
        <select name="size" id="sSize">
            <option value="">Please Select&hellip;</option>
            <option value="s">Small</option>
            <option value="m">Medium</option>
            <option value="l">Large</option>
            <option value="xl">Extra Large (+$3.00)</option>
        </select>
    </td>
    <td align="center" id="price_item_1"> 
        $39.99 
    </td> 
    <td align="center" id="total_item_1"> 
        $0.00
    </td> 
</tr> 
<tr> 
    <td align="center">
        <input type="text" name="qty_item_1" id="qty_item_1" size="2" />
    </td> 
    <td colspan="2"> 
        Hat 
    </td> 
    <td align="center" id="price_item_2"> 
        $14.99 
    </td> 
    <td align="center" id="total_item_2"> 
        $14.99 
    </td> 
</tr> 
<tr> 
    <td colspan="4" align="right"> 
        <strong>Grand Total:</strong> 
    </td> 
    <td align="center" id="grandTotal"> 
    </td> 
</tr> 
</table>
</body>
</html>

Answer 1

添加大小作为参数，并从描述中解析出额外的成本。下面的代码是未经测试，但应该有效。

<script type="text/javascript">
    $(document).ready(function (){

        function recalc(){ 
            // run the calc() method on each of the "total" fields 
            $("[id^=total_item]").calc( 
                // the equation to use for the calculation 
                "qty * (price + extraCharge)", 
                // we now define the values for the variables defined in the equation above 
                { 
                    // instead of using a static value, we use a jQuery object which grabs all the quantities 
                    qty: $("input[name^=qty_item_]"), 
                    // now we define the jQuery object which reads in the "price" from the table cell 
                    price: $("[id^=price_item_]"),

                    extraCharge: function() {
                       selectedSize = $('#sSize').val();
                       size = $('option[value=' + selectedSize + ']').text();
                       charge = 0;
                       if (size.indexOf('$') != -1) {
                          charge = parseFloat(size.substring(size.indexOf('$'), size.indexOf(')')));                       
                       }
                       return charge;
                    }
                }, 
                // this function is execute after the calculation is completed, which allows us to 
                // add formatting to our value 
                function (s){ 
                    // return the number as a dollar amount 
                    return "$" + s.toFixed(2); 
                }, 
                // once all calculations are completed, we execute the code below 
                function ($this){ 
                    // now we get the sum() of all the values we just calculated 
                    var sum = $this.sum(); 

                    // now that we have the grand total, we must update the screen 
                    $("#grandTotal").text( 
                        // round the results to 2 digits 
                        "$" + sum.toFixed(2) 
                    ); 
                } 
            ); 
        }

        // bind the recalc function to the quantity fields 
        $("input[name^=qty_item_]").bind("keyup", recalc);
    });
</script>

Answer 2

就个人插件而言，我建议用户考虑将产品的每个尺寸都视为不同的产品，这意味着您可以保持简单和通用。

如果您认为需要更高级的系统，那么提供一个可选参数，允许他们传递一个函数来计算并返回该项目的成本及其所需的任何参数，这将允许您插件的用户有一个更精细的成本计算系统。

我认为这是你最好的选择，因为人们（用户）习惯于发明成本规则，这些规则在世界上你最好的想法都无法想到。

现在我已经回答了你的问题，我会说任何费用或其他重要数据的验证应该毫无例外地在服务器上完成。

Answer 3

实际上我测试了这个并且让它工作也允许表单上的多个大小的字段

$("[id^=sSize_]").change(function(){
        var strLength = (this.id.length);
        var numbr = this.id.substring(strLength, strLength-1);
        //alert(numbr);
        $("[id=price_item_"+numbr+"]").text('$42.99');
    });

jQuery计算插件＆amp;改变每个选择的成本

3 个答案: