Jquery 使用数据-*属性从多个选择中更新总价

因此，我试图制作一个简单的脚本，可以从多个选择中更新总价。使用data-*属性在每个选项中设置价格

如果我将价格放在value属性中，但不知何故没有使用data price属性来设置价格，我会设法使它工作

任何帮助都将不胜感激

这是HTML：

<div class="container">
  <div class="row">
  <div class="col-md-6">Initial Price: <span id="thisIsOriginal" class="">$62.00</span></div>
  <div class="col-md-6">Total: <span id="total">$62.00</span></div>
  </div>
  <div class="row">
    <select class="optionPrice" name="select-1">
      <option value="">Please Select</option>
      <option data-price="" value="1">option a</option>
      <option data-price="20.00" value="2">option b (+$20.00)</option>
    </select>

    <select class="optionPrice" name="select-2">
      <option value="0">Please Select</option>
      <option data-price="5.00" value="3">option c</option>
      <option data-price="10.00" value="4">option d (+$10.00)</option>
    </select>

    <select class="optionPrice" name="select-3">
      <option value="">Please Select</option>
      <option data-price="" value="5">option e</option>
      <option data-price="15.00" value="6">option f (+$15.00)</option>
    </select>
  </div>
</div>

---

演示

我正在调试这段代码，它看起来像是在每一个选择发生更改后，您都在对其进行迭代，从而生成未定义的值

我提供的版本没有不必要的。每个。我还做了一些小的清理工作

$(document).ready(function() {

    var originalPriceText = $('#thisIsOriginal').text();
    var originalCurrency = originalPriceText.substring(0, 1);
    var originalPrice = originalPriceText.substring(1);
    var total = 0;

    $('.optionPrice').change(function(e) {
        dataPrice = $(this).find('option:selected').attr('data-price');
        if(dataPrice != undefined && dataPrice.length != 0) {
            total += parseFloat(originalPrice) + parseFloat(dataPrice);
        }
        $('#total').text('Total: $' + total.toFixed(2));
    });
});

---

我正在调试这段代码，它看起来像是在每个select上进行迭代，在其中一个select发生更改后，会生成未定义的值

我提供的版本没有不必要的。每个。我还做了一些小的清理工作

$(document).ready(function() {

    var originalPriceText = $('#thisIsOriginal').text();
    var originalCurrency = originalPriceText.substring(0, 1);
    var originalPrice = originalPriceText.substring(1);
    var total = 0;

    $('.optionPrice').change(function(e) {
        dataPrice = $(this).find('option:selected').attr('data-price');
        if(dataPrice != undefined && dataPrice.length != 0) {
            total += parseFloat(originalPrice) + parseFloat(dataPrice);
        }
        $('#total').text('Total: $' + total.toFixed(2));
    });
});

$（文档）.ready（函数（）{
$（'.optionPrice'）。更改（函数（）{
var OriginalPrice=$（'#thisisisopricinal'）.text（）.replace（'初始价格：'，''）；
var OriginalCurrency=原始价格子串（0,1）；
原始价格=原始价格。子串（1）；
var合计=0；
$（'.optionPrice'）。每个（函数（）{
if（$（this）.find（'option:selected'）.attr（'data-price'）！=0&&$（this.find（'option:selected'）.attr（'data-price'）！=未定义）{
log（$（'option:selected'，this.attr（“数据价格”）；
total+=parseFloat（$（'option:selected'，this）.attr（'data-price'）；
}
});
var newTotal=parseFloat（原始价格）+parseFloat（总计）；
$（“#总计”）.text（“$”+newTotal.toFixed（2））；
});
});

$（文档）.ready（函数（）{
$（'.optionPrice'）。更改（函数（）{
var OriginalPrice=$（'#thisisisopricinal'）.text（）.replace（'初始价格：'，''）；
var OriginalCurrency=原始价格子串（0,1）；
原始价格=原始价格。子串（1）；
var合计=0；
$（'.optionPrice'）。每个（函数（）{
if（$（this）.find（'option:selected'）.attr（'data-price'）！=0&&$（this.find（'option:selected'）.attr（'data-price'）！=未定义）{
log（$（'option:selected'，this.attr（“数据价格”）；
total+=parseFloat（$（'option:selected'，this）.attr（'data-price'）；
}
});
var newTotal=parseFloat（原始价格）+parseFloat（总计）；
$（“#总计”）.text（“$”+newTotal.toFixed（2））；
});
});

---

主要问题是

原始价格

，每个

块中也有一些问题

$(document).ready(function() {
    $('.optionPrice').change(function() {

      var OriginalPrice = $('#thisIsOriginal').text();
      var OriginalCurrency = OriginalPrice.substring(0, 1);
      OriginalPrice = OriginalPrice.split(' ')[2].substring(1);      

        var total = 0;

        $('.optionPrice').each(function() {
          var $el = $(this).find('option:selected');

          if($(this).val() != 0 && typeof $el.attr('data-price') != 'undefined') {
              total += parseFloat($el.attr('data-price'));
          }
        });
        var newTotal = parseFloat(OriginalPrice) + parseFloat(total);
        $('#total').text('$' + newTotal.toFixed(2));
    }); 
});

主要问题是
原始价格
，每个
块中也存在一些问题

$(document).ready(function() {
    $('.optionPrice').change(function() {

      var OriginalPrice = $('#thisIsOriginal').text();
      var OriginalCurrency = OriginalPrice.substring(0, 1);
      OriginalPrice = OriginalPrice.split(' ')[2].substring(1);      

        var total = 0;

        $('.optionPrice').each(function() {
          var $el = $(this).find('option:selected');

          if($(this).val() != 0 && typeof $el.attr('data-price') != 'undefined') {
              total += parseFloat($el.attr('data-price'));
          }
        });
        var newTotal = parseFloat(OriginalPrice) + parseFloat(total);
        $('#total').text('$' + newTotal.toFixed(2));
    }); 
});