Javascript 计算错误和 $NaN

Question

我很困惑，我尝试使用以下 javascript 来呈现 Total 金额计算，但我有 $NaN 而一些单元格没有使用下拉列表选择邮寄选项时显示正确的值。

这是我一直在研究的 Javascript 和 JSFIDDLE：

$(function() {
  function calcTotal() {
    var p = {      
      qty: parseInt($(".prod-row .qty").text().trim()),
        costperitem: parseInt($(".prod-row .costperitem").text().trim()),
        tax: parseFloat($(".prod-row .tax").text().trim().slice(1)),
        shipcost: parseFloat($(".prod-row .shippingcost").text().trim().slice(1)),
        price: parseFloat($(".prod-row .item-cost").text().trim().slice(1))      
      };
      var t = 0.00;
      if (p) {
         t = (p.qty * p.costperitem) + (p.tax) + (p.qty * p.shippingcost);
      }
      console.log(p, t);
      return t;
    }
    $("#shippingmethod").change(function(e) {
        var shipQty = parseInt($(".prod-row .qty").text());
        var shipCost = parseFloat($(this).val());
            $(".prod-row .item-cost").html("$" + shipCost.toFixed(2));
            $(".prod-row .total").html("$" + (shipQty * shipCost).toFixed(2));
        var total = calcTotal();
        $("#product-totals .total").html("$" + total.toFixed(2));
   });
});

期望的结果

将所有项目仅放在 1 行中，其中总计列显示以下计算得出的数学结果：(Qty. + ItemCost + Tax) + (Qty.*S&H).

感谢您的帮助！

Answer 1

问题出在索引调用上。在以下函数中：

function calcTotal() {
  var p = {      
    qty: parseInt($(".prod-row .qty").text().trim()),
    costperitem: parseInt($(".prod-row .costperitem").text().trim()),
    tax: parseFloat($(".prod-row .tax").text().trim().slice(1)),
    shipcost: parseFloat($(".prod-row .shippingcost").text().trim().slice(1)),
    price: parseFloat($(".prod-row .item-cost").text().trim().slice(1))      
  };
  var t = 0.00;
  if (p) {
    t = (p.qty * p.costperitem) + (p.tax) + (p.qty * p.shippingcost);
  }
  console.log(p, t);
  return t;
}

您引用了不存在的 p.shippingcost 和 returns undefined.

此外，您想 parseFloat() 在 costperitem 部分。 parseInt() 将舍入到最接近的整数。

您还需要 slice() 关闭任何前面的 $ 标志。

像这样更正：

function calcTotal() {
  var p = {      
    qty: parseInt($(".prod-row .qty").text().trim()),
    costperitem: parseFloat($(".prod-row .costperitem").text().trim().slice(1)),
    tax: parseFloat($(".prod-row .tax").text().trim().slice(1)),
    shipcost: parseFloat($(".prod-row .shippingcost").text().trim().slice(1)),
    price: parseFloat($(".prod-row .item-cost").text().trim().slice(1))      
  };
  var t = 0.00;
  if (p) {
    t = (p.qty * p.costperitem) + (p.tax) + (p.qty * p.shipcost);
  }
  console.log(p, t);
  return t;
}

祝你好运！

更新

我建议使用以下固定代码来执行所需的所有不同步骤，并使用正确的 Class 名称。

$(function() {
  function toCur(fl) {
    return "$" + parseFloat(fl).toFixed(2);
  }

  function parseCurToFloat(txt) {
    return parseFloat(txt.trim().slice(1));
  }

  function setNewShipCost($row, cost) {
    $row.find(".shipping-cost").html(toCur(cost));
    return toCur(cost);
  }

  function calcRowTotal($row) {
    var q = parseInt($row.find(".qty").text());
    var c = parseCurToFloat($row.find(".item-cost").text());
    var t = parseCurToFloat($row.find(".tax").text());
    var sh = parseCurToFloat($row.find(".shipping-cost").text());
    var ttl = (q * c) + (q * sh) + t;
    $row.find(".total").html(toCur(ttl));
    return ttl;
  }

  function calcNewTotal() {
    var t = 0.00;
    $(".prod-row").each(function(ind, el) {
      t = t + parseCurToFloat($(el).find(".total").text());
    });
    $("#product-totals .total").html(toCur(t));
    return t;
  }

  $("#shippingmethod").change(function(e) {
    var shipCost = $(this).val();
    console.log("Set Ship", setNewShipCost($(".prod-row"), shipCost));
    console.log("Calc Row Total", calcRowTotal($(".prod-row")));
    console.log("Calc total", calcNewTotal());
  });
});

工作示例：http://jsfiddle.net/Twisty/ag1u4vjc/

Javascript 计算错误和 $NaN

Javascript Miscalculation and $NaN

javascript

jquery

jquery-ui

mathematical-optimization

twitter-bootstrap-3