javascript - 合并选择的值以获得总价

Question

我正在开发一个网站，您可以在其中选择上衣和/或下衣的尺寸，并根据您的选择计算价格。所有尺码的价格均相同，但价格会有所不同，具体取决于您选择的是单件上衣、下装还是同时选择两件商品。

因此，在下面的示例中，如果您仅选择顶部或底部，结果应为 130 美元；如果同时选择两者，结果应为 260 美元；如果您将两个选择再次设置回默认选项，结果应为 0。

HTML

<label for="size_top">Select Size (Bikini Top)</label>
<select name="size_top" id="size_top" data-price="130">
  <option value="" data-multiplier="0">--</option>
  <option value="6" data-multiplier="1">Size 6</option>
  <option value="8" data-multiplier="1">Size 8</option>
  <option value="10" data-multiplier="1">Size 10</option>
  <option value="12" data-multiplier="1">Size 12</option>
</select>
<label for="size_btm">Select Size (Bikini Bottom)</label>
<select name="size_btm" id="size_btm" data-price="130">
  <option value="" data-multiplier="0">--</option>
  <option value="6" data-multiplier="1">Size 6</option>
  <option value="8" data-multiplier="1">Size 8</option>
  <option value="10" data-multiplier="1">Size 10</option>
  <option value="12" data-multiplier="1">Size 12</option>
</select>

JS

var basePrice = price = multiplier = 0;

$("select").on("change",function(){

  basePrice  = parseInt($(this).data("price"));
  multiplier = parseInt($(this).find(":selected").data("multiplier"));

  $("select").each(function() {
    price += basePrice * multiplier;
  });

  $(".price").text(price);

});

但是发生的情况是，当您第一次更改选择时，该值是 390，然后每当您选择乘数不为 0 的值时，它就会添加到总数中，因此它会不断增加。

如果我更改为 price = basePrice * multiplier 我会得到正确的值，但仅适用于一项选择。

Answer 1

试试这个

$("select").on("change",function(){

  basePrice  = parseInt($(this).data("price"));
  multiplier = parseInt($(this).find(":selected").data("multiplier"));

  basePrice2  = parseInt($('#size_btm').data("price"));
  multiplier2 = parseInt($('#size_btm').find(":selected").data("multiplier"));
var fp = basePrice  * multiplier  + basePrice2  * multiplier2 ;
  $(".price").text(fp);

});