JQueryの総入力数量

私は総量と価格を追加しようとしていますが、量産部品を稼働させることはできません。私は合計立方ヤードと各立方ヤードの価格を計算しています。前もって感謝します。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>

出典

2016-11-25 Cole Lewis

あなたの問題ではありませんが、一部のセレクタは少し冗長です。たとえば、$（this）.closest（ "ul"）。find（ "input.quantity：text"）。 $（this）.closest（ "ul"）。find（ "。quantity"）。val（）;そのクラスを持つオブジェクトは1つしかないからです。 – Bindrid

'subTot'は文字列として取得されます。文字列は 'parseFloat（）'を持っていません。 – josephting

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

を参照してください。

出典

2016-11-25 03:36:22 irot

非常によく、ありがとう –

答えて

関連する問題