jQuery計算プラグインと選択あたりの変更コスト

注文の総コストを計算するフォームがありますが、アイテムのサイズが大きくなるほど、それを考慮することはできません。誰にでもアイデアはありますか？以下のサンプルを参照してください。フィールド&計算プラグインはパラメータとしてサイズを追加し、記述から余分なコストを解析here jQuery計算プラグインと選択あたりの変更コスト

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

出典

2011-02-02 Trey

から入手できます。以下のコードは、未検証ですが、動作するはずです。そのプラグインで、私は、製品の各サイズ別の製品作りを検討するようユーザーに助言するなど個人的に

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

出典

2011-02-02 16:37:01 Victor

、これはあなたが単純で一般的な、それを維持することができますを意味します。

さらに進んだシステムが必要と思われる場合は、必要なパラメータを指定してそのアイテムのコストを計算して返す関数を渡すことができるオプションのパラメータを指定します。より精巧な原価計算システムを持つプラグイン。

私はこれがあなたの最良の選択肢だと思うのです。人々（ユーザー）は、世界中で最高の意志でそれらのすべてを考えることができない原価計算ルールを発明する習慣があります。

私はあなたの質問に答えました。私は、コストやその他の重要なデータの検証は例外なくサーバー上で完了しなければならないと言います。

出典

2011-02-02 16:42:15 Robert

は、実際に私はこれをテストし、それがフォーム上に複数のサイズのフィールドを可能にも動作するようになった

$("[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'); 
    });

出典

2011-02-02 17:40:59 Trey

jQuery計算プラグインと選択あたりの変更コスト

答えて

関連する問題