jQuery-如何从产品名称，数量范围和价格范围表中计算产品价格 [英] jQuery - how to calculate a product price from a table of product names, quantity ranges and price ranges

问题描述

我有3个产品A, B, C

然后我为这些产品有2个插件:1, 2

Then I have 2 addons for those products, : 1, 2

然后我有价格范围与数量范围的表.见下文

Then I have table of price ranges vs quantity ranges. See below

产品价格与数量价格

+---------------+--------+----------+
|    Product    |  Qty   |  Price   |
+---------------+--------+----------+
|       A       | 0-10   |    $2    |
|       A       | 10-20  |    $1    |
+---------------+--------+----------+
|       B       | 0-10   |    $3    |
|       B       | 10-20  |    $2    |
+---------------+--------+----------+
|       C       | 0-10   |    $4    |
|       C       | 10-20  |    $3    |
+---------------+--------+----------+

产品与广告价格

+---------------+----------+----------+
|    Product    |  AddOn   |  Price   |
+---------------+----------+----------+
|       A       | 1        |    $2    |
|       A       | 2        |    $1    |
+---------------+----------+----------+
|       B       | 1        |    $3    |
|       B       | 2        |    $2    |
+---------------+----------+----------+
|       C       | 1        |    $4    |
|       C       | 2        |    $3    |
+---------------+----------+----------+

• 产品设置为radio按钮
• 附加组件设置为radio按钮
• 数量已设置为input字段
• Products are setup as radio buttons
• Addonons are setup as radio buttons
• Quantity is setup as an input field

我的问题

如何根据人们从上面选择的内容来计算产品的成本.我目前有一个很长的脚本来执行此操作，但是我想优化并使用arrays或2d arrays并以正确的方式进行操作. 当前脚本在这里.

How do I calculate the cost of a product based on what people select from above. I currently have a very long script that does this, but I want to optimise and use arrays or maybe 2d arrays and do it the proper way. The current script is here .

这是我通过此功能设置的网页.

先谢谢了！

推荐答案

具有数量数组OB.qtty和无线电name="product"和name="style"，您可以找到哪些是:checked并将这两个values组合在一起，即:p1(对于产品1)和s2(对于样式2)​​，并获得价格为pric的OB["p1s2"]数组.

Having an array of quantities OB.qtty and radios name="product" and name="style" you can find which ones are :checked and combine both values i.e: p1 (for the product 1) and s2 (for the style 2) and get the OB["p1s2"] array of prices pric.

现在(请参见下面的示例)pric保存此数组

Now (see example below) pric holds this array

[2.10, 2.00, 1.80, 1.60, 1.40]

，我们有预定义的数量范围OB.qtty:

and we have the predefined quantity ranges OB.qtty:

[  50,  100,  150,  200,  250]

现在您所需要做的就是:获取用户所需的物品数量；找出什么是OB.qtty各自的范围键.
假设用户输入160项目数量，以找到OB.qtty键索引，请使用.some()

now all you need to do is to: get the user's desired quantity of items; find out what's the OB.qtty respective range key.
Say the user enters 160 items quantity, to find out the OB.qtty key index use .some()^{.some() MDN Docs} (or create a for loop if you need to support IE<9) and use that key index to get the pric[qIdx] into itemPrice (results in: 1.8).
To add decimals $1.80 use .tofixed(2)

var OB = {
  wrap : 0.05,
  // quantities
  qtty : [  50,  100,  150,  200,  250],
  // product 1
  p1s1 : [2.00, 1.80, 1.60, 1.40, 1.20],
  p1s2 : [2.10, 2.00, 1.80, 1.60, 1.40],
  p1s3 : [2.25, 2.15, 2.05, 1.95, 1.75],
  // product 2
  p2s1 : [3.00, 2.80, 2.60, 2.40, 2.20],
  p2s2 : [3.10, 3.00, 2.80, 2.60, 2.40],
  p2s3 : [3.50, 3.30, 3.00, 2.80, 2.50]
};

function calculate() {
  
  var pVal = $("[name=product]:checked").val();           // "p1", "p2" ?
  var sVal = $("[name=style]:checked").val();             // "s1", "s2", "s3" ?
  var qVal = parseInt($("[name=quantity]").val(), 10)||0; // quantity input
  var wVal = $("[name=wrap]:checked").val();              // (wrap) "yes", "no" ?
  var pric = OB[pVal+sVal]; // i.e: OB["p1s3"]            // (returns: array of prices)

  var qIdx = 0;
  OB.qtty.some(function(v, i) {
    qIdx = i;
    return v >= qVal;
  });
  
  var itemPrice = pric[qIdx];
  var wrapPrice =  wVal==="yes" ? (qVal * OB.wrap) : 0;
  var total = (qVal * itemPrice) + wrapPrice;
  
  $("[name=total]").val( total.toFixed(2) );
  
}

$("[name=product], [name=style], [name=wrap]").on("change", calculate);
$("[name=quantity]").on("input", calculate);
calculate();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Products</h3>

<label>
  <input type="radio" name="product" value="p1" checked> Product 1
</label>
<label>
  <input type="radio" name="product" value="p2"> Product 2
</label>

<h3>Styles</h3>

<label>
  <input type="radio" name="style" value="s1" checked> Style 1
</label>
<label>
  <input type="radio" name="style" value="s2"> Style 2
</label>
<label>
  <input type="radio" name="style" value="s3"> Style 3
</label>

<h3>Quantity</h3>

<input type="number" name="quantity" value="150">

<h3>Wrap individually</h3>
<label>
  <input type="radio" name="wrap" value="no" checked> No
</label>
<label>
  <input type="radio" name="wrap" value="yes"> Yes (+ $0.05 per item)
</label>

<h3>Price</h3>
$<input name="total" value="" readonly>

请注意，以上内容并不理想，我想问客户产品 vs 样式 vs 数量之间的数学关系是什么. (这从一开始就让我感到困惑...).否则，您将发现自己创建的价格/样式数组负载.

Note that the above is not ideal, I'd rather ask the client what are the mathematical relations between product vs style vs quantity. (That's what was confusing me from the start...). Otherwise you'll find your-self creating load of price/style Arrays.

希望有帮助...

这篇关于jQuery-如何从产品名称，数量范围和价格范围表中计算产品价格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！