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

Question

因此，我试图做一个简单的脚本，可以更新总价格从多种选择。使用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>

这是JS：

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

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

    var total = 0;

    $('.optionPrice').each(function() {
        if($(this).attr('data-price') != 0) {
          total += parseFloat($('option:selected',this).attr('data-price'));
        }
    });
    var newTotal = parseFloat(OriginalPrice) + parseFloat(total);
    $('#total').text('$' + newTotal.toFixed(2));
});
});

演示这里

Answer 1

<script>
$(document).ready(function () {
    $('.optionPrice').change(function () {
        var OriginalPrice = $('#thisIsOriginal').text().replace('Initial Price: ','');
        var OriginalCurrency = OriginalPrice.substring(0, 1);
        OriginalPrice = OriginalPrice.substring(1);
        var total = 0;
        $('.optionPrice').each(function () {
            if ($(this).find('option:selected').attr('data-price') != 0 && $(this).find('option:selected').attr('data-price') != undefined) {
                console.log($('option:selected', this).attr("data-price"));
                total += parseFloat($('option:selected', this).attr('data-price'));
            }
        });
        var newTotal = parseFloat(OriginalPrice) + parseFloat(total);
        $('#total').text('$' + newTotal.toFixed(2));
    });
});

​

Answer 2

我正在调试这段代码，它看起来就像是在每个select上进行迭代，在其中一个已经更改之后，这个选项产生了未定义的值。

我提供的版本没有不必要的.each。我还做了些小清理。

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

Answer 3

OriginalPrice的主要问题是，each块中也存在一些问题。

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