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

演示here

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

我正在调试这段代码，看起来你正在迭代一个已经改变的每个选择，这会产生未定义的值。

我提供的版本没有不必要的.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));
    }); 
});

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

3 个答案: