jQuery-如何根据产品名称、数量范围和价格范围表计算产品价格

Question

我有3个产品A, B, C

然后我有两个用于这些产品的插件：1, 2

然后我有价格范围和数量范围的表格。见下文

产品与数量价格

+---------------+--------+----------+
|    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按钮
• Addonon设置为radio按钮
• 数量设置为input字段

我的问题

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

这是我用这个功能设置的网页。

提前感谢！

Answer 1

有了一个数量OB.qtty和无线电name="product"和name="style"的数组，你可以找到哪一个是:checked，并将两个values组合起来，即：p1（用于产品1）和s2（用于样式2），得到价格pric的OB["p1s2"]数组。

现在（见下面的例子）pric持有这个阵列

[2.10, 2.00, 1.80, 1.60, 1.40]

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

[  50,  100,  150,  200,  250]

现在你所需要做的就是：获得用户想要的物品数量；找出OB.qtty各自的量程键是什么
假设用户输入160项目数量，使用.some()^{.some（）MDN Docs}（或者如果需要支持IE<9，则创建for循环）来查找OB.qtty密钥索引，并使用该密钥索引将pric[qIdx]获取到itemPrice中（结果为：1.8）
要添加小数$1.80，请使用.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>

注意，上面的情况并不理想，我宁愿问客户产品与风格和数量之间的数学关系是什么。（这就是从一开始就让我困惑的地方…）。否则，你会发现你自己创造了大量的价格/风格数组。

希望帮助