Question

我试图添加总量和价格，似乎无法获得数量部分工作。我正在计算每立方码的总立方码和价格。提前谢谢。

<!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>

Answer 1

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

看看它是否适合你。

JQuery输入总量

1 个答案: