javascript - 单击选择选项后更新产品价格在 opencart 中显示错误

Question

当我单击所选选项时，产品价格更新显示错误。这是我的代码

<div class="container">
      <div class="row">
      <div class="col-md-6">Initial Price: <span id="thisIsOriginal" class="">$45,000.00</span></div>
      <div class="col-md-6">Total: <span id="total">$45,000.00</span></div>
      </div>
      <div class="row">
        <select class="optionPrice" name="select-1">
          <option value="">Please Select</option>
          <option data-price="2,000.00" value="20">+$2,000.00</option>
        </select>
      </div>
    </div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(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).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));
    });
});
</script>
 

如何解决这个问题。我想选择后价格显示47,000。

Answer 1

您的代码的问题是，

• 您的价格中包含 ,。因此，在 parseFloat() 之后，逗号后面的值将被 chop 。使用parseFloat之前需要删除逗号。

需要更改以下几行，

 total += parseFloat($('option:selected', this).attr('data-price').replace(/,/g, ""));

和

var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);

Updated Fiddle

  $('.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).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').replace(/,/g, ""));

      }
    });
    var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);
    $('#total').text('$' + newTotal.toFixed(2));
  });

编辑以获取逗号分隔值，

$('.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).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').replace(/,/g, ""));
    }
  });
  var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);
  newTotal = numberWithCommas(newTotal);
  $('#total').text('$' + newTotal + ".00");
});

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}