jQueryの価格計算機

Question

私は単純なjQuery電卓を作成しようとしていますが、期待しているようにはうまく機能していないようです。基本的には、入力ボックスからの価格を0で自動的に計算し、+/-をクリックすると乗算する必要があります。

何も表示されないか、エラーを表示していないようです。

jQuery(document).ready(function(){ 
     var qty = parseInt($('.qty').val());  
    var price = parseFloat($('#price').val()); 

    $("#price").each(function(){ 
     total += parseFloat(this.value); 
    }); 

http://jsfiddle.net/hktxyz5z/1/

私は、誰もが任意のアイデアを持って、私は思考の上にいますかどうかわからないのですか？

Answer 1

あなたは、クリックイベント内の変数宣言を与える必要があります。

var qty = parseInt($('.qty').val());  
var price = parseFloat($('#price').val()); 

理由は、あなたが静的に最初のロードで0.00に値を設定しています。インクリメントまたはデクリメントするたびに、値は変更されません。一度設定され、変更されると設定されません。クリックイベントが発生すると、動的に変更されません。

解決策は、上記の2行を.click()関数内に置くことです。

jQuery(document).ready(function(){ 

    $("#price").each(function(){ 
    total += parseFloat(this.value); 
    }); 

    // This button will increment the value 
    $('.qtyplus').click(function(e){ 
    // Stop acting like a button 
    e.preventDefault(); 
    // Get the field name 
    fieldName = $(this).attr('field'); 
    // Get its current value 
    var currentVal = parseInt($('input[name='+fieldName+']').val()); 
    // If is not undefined 
    if (!isNaN(currentVal)) { 
     // Increment 
     $('input[name='+fieldName+']').val(currentVal + 1); 
     qty = parseInt($('.qty').val());  
     price = parseFloat($('#price').val()); 
     $('#total').val((qty * price ? qty * price : 0).toFixed(2)); 
    } else { 
     // Otherwise put a 0 there 
     $('input[name='+fieldName+']').val(0); 
     qty = parseInt($('.qty').val());  
     price = parseFloat($('#price').val()); 
     $('#total').val((qty * price ? qty * price : 0).toFixed(2)); 
    } 
    }); 
    // This button will decrement the value till 0 
    $(".qtyminus").click(function(e) { 
    // Stop acting like a button 
    e.preventDefault(); 
    // Get the field name 
    fieldName = $(this).attr('field'); 
    // Get its current value 
    var currentVal = parseInt($('input[name='+fieldName+']').val()); 
    // If it isn't undefined or its greater than 0 
    if (!isNaN(currentVal) && currentVal > 0) { 
     // Decrement one 
     $('input[name='+fieldName+']').val(currentVal - 1); 
     qty = parseInt($('.qty').val());  
     price = parseFloat($('#price').val()); 
     $('#total').val(((qty * price > 0) ? qty * price : 0).toFixed(2)); 
    } else { 
     // Otherwise put a 0 there 
     $('input[name='+fieldName+']').val(0); 
     qty = parseInt($('.qty').val());  
     price = parseFloat($('#price').val()); 
     $('#total').val(((qty * price > 0) ? qty * price : 0).toFixed(2)); 
    } 
    }); 
}); 

ワーキングフィドル：http://jsfiddle.net/txk2d85y/

Answer 2

次の2つの価格の箱を持っている理由私はわからないんだけど、これはいくつかの異常な動作の原因となるので、私は、1を持っているフィドルを更新しました。

しかし、問題の根本は、document.readyにqtyとpriceと宣言していますが、ボタンがクリックされるたびに更新されないということです。あなたは全体の事は非常に短く、きれい作ることができるように

http://jsfiddle.net/hktxyz5z/2/

しかし、私はプラスとマイナスのボタンの間のコードの繰り返しを減らすこと、感じる：ここではフィドルは、一つの解決策を実証しています。

http://jsfiddle.net/hktxyz5z/3/

私が行った変更は、次のとおりです：

更新ここ

...勧告に更新をお楽しみにしてリファクタリングしたバージョンです

1. 入力は必要ありません。なぜなら、とにかくデフォルトのアクションを妨げるからです。その場合は、私が行った<button>を使用する方が良いです。
2. 両方の数量ボタンが同じイベントハンドラに応答するようになりました。このイベントハンドラは、ボタンから調整属性を読み込み、adjustQty関数に渡します。
3. adjustQty関数は、新しい合計を計算し、テキストボックスを更新します。

2番目の価格帯の目的について明白なことがない場合は、私に教えてください。

アップデート2：

私はあなたの数量を掛けた後、両方の価格値を追加することを推測していますか？その場合は、この修正された例では、トリックを行う必要があります。

http://jsfiddle.net/hktxyz5z/4/

唯一の本当の違いは、それは量によって乗算する前に、それは両方の価格ボックスの合計を計算していることです。 「jQueryの-CALX」

ここでそのdemostration見る：

Answer 3

jQueryのあなたを助けるかもしれないプラグインが提供

http://prototype.xsanisty.com/calx2/