Question

我不想根据所选数量和价格计算总价。因此，我使用按钮给出的data-property。问题是我无法使用javascript计算总价格，因为我总是得到NaN。我认为是因为这些变量被解释为String，但是parseFloat或parseInt也没有帮助。

这是我的HTML5：

<div class="checkout-meta">
    <div class="checkout-info">
        <strong>Total:</strong> 35,00€
    </div>
    <div class="checkout-cta">
        <select class="quantity" name="quantity">
            <option>
                1
            </option>
            <option>
                2
            </option>
            <option>
                3
            </option>
            <option>
                4
            </option>
        </select> 
        <a class="btn-1 ajax-popup" data-packageid="1"
        data-price="35" data-region="EUW" href="checkout.php">
            Purchase Now
        </a>
    </div>
</div>

JavaScript / jQuery：

$('.quantity').change(function(e){
    var purchaseBtn = $(this).parent().find('.btn-1');
    var price = parseFloat(purchaseBtn.data('price'));
    var quantity = parseFloat(purchaseBtn.data('quantity'));
    var total = price*quantity;
    $(this).parent().parent().find('.checkout-info').html("<strong>Total:</strong> " + total + ",00€");
});

JSFiddle：http://jsfiddle.net/23owof84/

Answer 1

您从按钮中取出数量

var quantity = parseFloat(purchaseBtn.data('quantity'));

但你需要从选择

中取出它

var quantity = parseFloat($(".quantity option:selected" ).text());

这是完整的代码段。检查更改http://jsfiddle.net/23owof84/6/

$('.quantity').change(function(e){
  var purchaseBtn = $(this).parent().find('.btn-1');
  var price = parseFloat(purchaseBtn.data('price'));
  var quantity = parseFloat($(this).find('option:selected').text());
  var total = price*quantity;
  $(this).parent().parent().find('.checkout-info').html("<strong>Total:</strong> " + total + ",00€");
});

使用HTML中的数据字段提取的变量进行计算

1 个答案: