JavaScript 误算和 $NaN

Question

我很困惑，我尝试使用以下 JavaScript 来呈现总计金额计算，但我有 $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 行中，并且总计列显示以下计算结果:(数量 + 商品成本 + 税) + (数量*S&H)。。 p>

感谢您的帮助!

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 不存在并返回 undefined。

此外，您还希望在 costperitem 部分中进行 parseFloat() 。 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;
}

祝你好运!

更新

我建议使用以下修复的代码来执行正确的类名称所需的所有各个步骤。

$(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/