jQuery 价格计算器

Question

I am trying to create a simple jQuery calculator but it doesn't seem to be working as I hope it to be. Basically it should calculate automatically at 0 the price from the input boxes and then multiply when the +/- are clicked.

It doesn't seem to do anything or show any errors.

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/

I am not sure if I am over thinking, anyone got any ideas?

Answer 1

You need to give the variable declarations inside the click event:

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

The reason is, you are statically setting the values to 0.00 at the first load. Every time you increment or decrement, the values do not change. It is set once and not set when it is changed. They don't dynamically change, after the click events are fired.

The solution is to put the above two lines inside the .click() functions.

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

Working Fiddle: http://jsfiddle.net/txk2d85y/

Answer 2

I'm not sure why you have two price boxes, but I've updated the fiddle to have 1, since this causes some unusual behaviour.

However, the root of the problem is that you have declared qty and price on document.ready, but then are not updating them whenever the buttons are clicked. Here is a fiddle demonstrating one solution:

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

However, I feel like you could make the whole thing much shorter and cleaner, reducing repetition of code between the plus and minus buttons. Stay tuned for an update with a recommendation...

Update

Here is a refactored version:

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

The changes I've made are:

1. You don't need an input, since you are simple preventing the default action anyway. In that case it is better to use a <button> , which I have done.
2. Both quantity buttons now respond to the same event handler, which simple reads the adjustment attribute from the button and passes it to the adjustQty function.
3. The adjustQty function then calculates the new total, and updates the text boxes.

If I've missed something obvious regarding the purpose of the second price box, please let me know and I'll adjust my example.

Update 2:

I'm guessing that you want to add up both price values, then multiply by the quantity? If so, this amended example should do the trick:

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

The only real difference is that it calculates the total for both price boxes before it multiplies by the quantity.

Answer 3

jQuery provide a plugin which may help you : "jQuery-Calx"

watch its demostration here :

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