j查询价格计算器

jQuery price calculator

本文关键字：计算器 查询      更新时间：2023-09-26

我正在尝试创建一个简单的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/

我

不确定我是否想多了，有人有什么想法吗？

您需要在单击事件中给出变量声明：

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

原因是，您静态地将值设置为在第一次加载时0.00。每次递增或递减时，值都不会更改。它设置一次，更改时不设置。触发点击事件后，它们不会动态更改。

解决方案是将上述两行放在.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/

jQuery提供了一个可以帮助你的插件："jQuery-Calx"

在这里观看它的演示：

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

我不确定为什么你有两个价格框，但我已将小提琴更新为 1，因为这会导致一些异常行为。

但是，问题的根源在于您已在 document.ready 上声明了qty和price，但每次单击按钮时都不会更新它们。 这是一个演示一个解决方案的小提琴：

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

但是，我觉得你可以使整个事情更短、更干净，减少加号和减号按钮之间的代码重复。 请继续关注带有建议的更新...

更新

下面是一个重构版本：

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

我所做的更改是：

  1. 您不需要输入，因为无论如何您都可以轻松阻止默认操作。 在这种情况下，最好使用 <button> ，我已经这样做了。
  2. 两个数量按钮现在都响应相同的事件处理程序，该处理程序只是从按钮读取调整属性并将其传递给 adjustQty 函数。
  3. 然后，adjustQty函数计算新的总计，并更新文本框。

如果我错过了关于第二个价格框用途的明显内容，请告诉我，我会调整我的示例。

更新 2：

我猜你想把两个价格值加起来，然后乘以数量？ 如果是这样，这个修改后的示例应该可以解决问题：

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

唯一真正的区别是，它在乘以数量之前计算两个价格框的总数。

相关文章：