Question

我正在使用html / javascript / jQuery创建一个程序，让用户可以在购物车中查看他们想要的商品，然后计算小计，税金，运费和总额。

现在，我很难显示所有这些值，然后根据用户对数量的处理情况动态更改它们。如果重要的话，我的购物车里面还有一个删除按钮。

指出您应该关注的最有可能的功能：calculateTotalPrice()，calculateSubtotal()，calculateTax()，calculateShipping()，{ {1}}，或者在我尝试修复数量动态输入的部分中，您可以在这里：

calculateTotal()

另外，在检查项目并将它们放入购物车时，输出如下：

$("#quantity").change(function(){ calculateTotalPrice(); });

Subtotal: 0.00

Tax: 0.00

Shipping: 0.00

Total:    NaN

编辑：我更改了我的

function calculateTotalPrice(){
    calculateSubtotal();
    calculateTax();
    calculateShipping();
    calculateTotal();
}

函数以使用.each方法而不是可能存在问题的for循环思维。我不再获得calculateSubtotal()，它只是Total: NaN。我不知道这是否是一种改进，但我做了改变。

以下是完整代码：

function calculateSubtotal(){
    var subtotal = 0;
    var quantity = 1;
    /*for(var i = 0; i < cart.lengh; i++){
        quantity = parseInt($(this).val());
        subtotal += parseInt(item_list[cart[i]].price * quantity);
    }*/

    $.each(cart, function(index){
        quantity = parseInt($(this).val());
        subtotal += parseInt(item_list[cart[index]].price * quantity);

    });

    $('#subtotal').html(subtotal.toFixed(2));

}

function calculateTax(){
    var taxAmount = 0;
    var taxes = .06;
    var subtotal = $('#subtotal').val();

    taxAmount = parseInt(subtotal * taxes);

    $('#tax').html(taxAmount.toFixed(2));
}


function calculateShipping(){
    var shippingAmount = 0;
    var shippingPerc = .02;
    var subtotal = $('#subtotal').val();

    shippingAmount = parseInt(subtotal * shippingPerc);

    $('#shipping').html(shippingAmount.toFixed(2));
}



function calculateTotal(){
    var totalCost = 0;
    var subtotal = $('#subtotal').val();
    var taxes = $('#tax').val();
    var shippingCost = $('#shipping').val();

    totalCost = parseInt(subtotal + taxes + shippingCost);

    $('#total').html(totalCost.toFixed(2));
}

Answer 1

更改这些：

function createTableRow(index){
    var trow = '';
    trow+= "<tr><td>"+item_list[index].title + "</td>>";
    trow += "<td>"+item_list[index].price + "</td>";
    trow += "<td><input type='text' id='quantity' value='1'  size='5' />";
    trow += "<td><button type='button' class='delete-item' value='"+index+"'>Delete</button></td></tr>";
    return trow;
}
$("#quantity").change(function(){ calculateTotalPrice(); });

对于这些：

function createTableRow(index){
    var trow = '';
    trow+= "<tr><td>"+item_list[index].title + "</td>>";
    trow += "<td>"+item_list[index].price + "</td>";
    trow += "<td><input type='text' class='quantity' value='1'  size='5' />";
    trow += "<td><button type='button' class='delete-item' value='"+index+"'>Delete</button></td></tr>";
    return trow;
}

$('#selected-list').on("change", ".quantity", calculateTotalPrice);

动态更改总计并显示它们

1 个答案: