2016-11-25 69 views
0

我试图将总量以及价格相加,似乎无法获得数量部分的工作。我正在计算总立方码以及每立方码的价格。先谢谢你。JQuery总输入量

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
<script 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
    crossorigin="anonymous"></script> 
</head> 

<body> 


<div class="page"> 
<ul> 
    <li>Cubic Yards<span><input type="text" name="Quantity" value="" class="quantity"></span></li> 
    <li>Price <span><input type="text" name="Price" value="25.50" class="price"></span></li> 
    <li> Total <span><input type="text" name="Total" value="0.00" class="total"></span></li> 
</ul> 

<div id="foo"></div> 
<input type="submit" value="ADD MORE" class="button" id="click"> 
<ul> 
    <li>Total Cubic Yards:<input id="cubicYards" type="text" name="cubicYards" value="0"></li> 
    <li>Total Price:<input id="amount" type="text" name="totalPrice" value="0.00"></li> 
</ul> 
</div> 

<script> 
$(".page").on("change keyup keydown paste propertychange bind mouseover", function(){ 
    calculateSum(); 
    calculateQuantity(); 
}); 

// add fields 
$("#click").click(function() { 
$("#foo").append(
'<ul>' + '\n\r' + 
'<li>Cubic Yards <span><input type="text" name="Quantity" value="" class="quantity"></span></li>' + '\n\r' + 
'<li>Price <span><input type="text" name="Price" value="" class="price"></span></li>' + '\n\r' + 
'<li>Total <span><input type="text" name="Total" value="0.00" class="total"></span></li>' + '\n\r' + 
'</ul>' 
); 

$(".total").each(function() { 
    $(this).keyup(function(){ 
     calculateSum(); 

    }); 
}); 

$(".quantity").each(function() { 
    $(this).keyup(function(){ 
     calculateSum(); 

    }); 
}); 

}); 

// function  
function calculateSum() { 
var sum = 0; 
$(".total").each(function() { 
if(!isNaN(this.value) && this.value.length!=0) { 

    var quantity = $(this).closest("ul").find("input.quantity:text").val(); 
    var price = $(this).closest("ul").find("input.price:text").val(); 

    var subTot = (quantity * price); 

    $(this).val(subTot.toFixed(2)); 

    sum += parseFloat(subTot.toFixed(2)); 
    } 
}); 

    $('#amount').val(sum.toFixed(2)); 
} 




// function  
function calculateQuantity() { 
var sum = 0; 
$(".quantity").each(function() { 
if(!isNaN(this.value) && this.value.length!=0) { 

    var quantity = $(this).closest("ul").find("input.quantity:text").val(); 


    var subTot = (quantity); 

    $(this).val(subTot.toFixed(2)); 

    sum += parseFloat(subTot.toFixed(2)); 
    } 
}); 

    $('#cubicYards').val(sum.toFixed(2)); 
} 
</script> 


</body> 
</html> 
+0

不是你的问题,而是你的一些选择器有点多余。例如$(this).closest(“ul”)。find(“input.quantity:text”)。val(); anc被替换为$(this).closest(“ul”)。find(“。quantity”)。val();因为这个类只有一个对象。 – Bindrid

+0

'subTot'被检索为一个字符串。字符串不具有'parseFloat()'。 – josephting

回答

0

您的var quantity选择器似乎是多余的。我是否有权假设你想总结全部你的.quantity字段?如果是这样,我不明白为什么你必须先走到最近的ul

我做什么,我想你想实现一个简化版本:JS Bin

基本上我只是简化了您的calculateQuantity功能如下:

function calculateQuantity() { 
    var sum = 0; 

    $(".quantity").each(function() { 
     var q = parseFloat($(this).val()); 

     if(!isNaN(q)) { 
      $(this).val(q.toFixed(2)); 
      sum += q; 
     } 
    }); 

    $('#cubicYards').val(sum.toFixed(2)); 
}; 

看看是否能为你工作。

+0

非常好,谢谢 –