结帐表在前端无法正确呈现

Question

我创建了一个具有自动增量功能的结账表，列出了一个网站的3个产品，但由于某种原因，它在前端失真。我需要在调整数量时增加每个产品的总价格。下面附有CSS，HTML和JS代码。任何和所有帮助提前赞赏。谢谢。

/* Set rates + misc */
var taxRate = 0.0825;
var fadeTime = 300;

/* Assign actions */
$(".product-quantity-l3 input").change(function() {
  updateQuantity(this);
});

/* Recalculate cart */
function recalculateCart() {
 var subtotal = 0;

  /* Sum up row totals */
  $(".product-l3").each(function() {
    subtotal += parseFloat(
    $(this)
    .children(".product-line-price-l3")
    .text()
    );
  });

  /* Calculate totals */
  var tax = subtotal * taxRate;
  var total = subtotal + tax;

 /* Update totals display */
  $(".totals-value-l3").fadeOut(fadeTime, function() {
   $("#cart-subtotal-l3").html(subtotal.toFixed(2));
   $("#cart-tax-l3").html(tax.toFixed(2));
   $("#cart-total-l3").html(total.toFixed(2));
   if (total == 0) {
    $(".checkout-l3").fadeOut(fadeTime);
   } else {
    $(".checkout-l3").fadeIn(fadeTime);
    }
    $(".totals-value-l3").fadeIn(fadeTime);
  });
 }

 /* Update quantity */
 function updateQuantity(quantityInput) {
  /* Calculate line price */
  var productRow = (quantityInput)
   .parent()
   .parent();
  var price = parseFloat(productRow.children(".product-price-l3").text());
  var quantity = $(quantityInput).val();
  var linePrice = price * quantity;

  /* Update line price display and recalc cart totals */
  productRow.children(".product-line-price-l3").each(function() {
   $(this).fadeOut(fadeTime, function() {
    $(this).text(linePrice.toFixed(2));
     recalculateCart();
     $(this).fadeIn(fadeTime);
    });
  });
}

/* Add here all your css styles (customizations) */
/* Global settings */
/* Global "table" column settings */
.product-details-l3 {
float: left;
width: 37%;
}
.product-price-l3 {
 float: left;
 width: 12%;
}
.product-quantity-l3 {
float: left;
 width: 10%;
}
.product-line-price-l3 {
 float: left;
 width: 12%;
 text-align: right;
}
/* This is used as the traditional .clearfix class */
.group-l3 .shopping-cart-l3 .column-labels-l3 .product-l3 .totals-item-l3 
{
 content: "";
 display: table;
}
.group-l3 .shopping-cart-l3 .column-labels-l3 .product-l3 .totals-item-l3 
{
  clear: both;
}
.group-l3 .shopping-cart-l3 .column-labels-l3, .product-l3 .totals-item-l3 
{
 zoom: 1;
}
/* Apply clearfix in a few places */
/* Apply dollar signs */
.product-l3 .product-price-l3 .product-line-price-l3 .totals-value-l3 {
 content: "$";
}
/* Body/Header stuff */
 }
h1 {
  font-weight: 100;
}
label {
 color: #aaa;
}
.shopping-cart-l3 {
  margin-top: -45px;
}
/* Column headers */
.column-labels-l3 .label-l3 {
 padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.column-labels-l3 .product-image-l3 .product-details-l3 {
  text-indent: -9999px;
}
 /* Product entries */
.product-l3 {
 margin-bottom: 20px;
 padding-bottom: 10px;
 border-bottom: 1px solid #eee;
}
.product-l3 .product-details-l3 .product-title-l3 {
 margin-right: 20px;
  font-family: "Helvetica Neue Medium";
}
.product-l3 .product-quantity-l3 input {
  width: 40px;
}
/* Totals section */
.totals-l3 .totals-item-l3 {
 float: left;
 clear: both;
  width: 80%;
  margin-bottom: 10px;
}
.totals-l3 .totals-item-l3 .label-l3 {
 float: left;
  clear: both;
 width: 80%;
  text-align: right;
}
.totals-l3 .totals-item-l3 .totals-value-l3 {
 float: right;
 width: 20%;
  text-align: right;
}   
.totals-l3 .totals-item-total-l3 {
 font-family: "Helvetica Neue Medium";
}
.checkout-l3 {
 float: left;
  border: 0;
  margin-top: 20px;
  padding: 6px 11px;
  background-color: #6b6;
  color: #fff;
  font-size: 20px;
  border-radius: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Products</h1>

<div class="shopping-cart-l3">

<div class="column-labels-l3">
<label class="product-details-l3">Product</label>
<label class="product-price-l3">Price</label>
<label class="product-quantity-l3">Quantity</label>
<label class="product-line-price-l3">Total</label>
 </div>

 <div class="product-l3">
   <div class="product-details-l3">
  <div class="product-title-l3">Product 1</div>
   </div>
   <div class="product-price-l3">95.00</div>
  <div class="product-quantity-l3">
  <input type="number" value="0" min="0">
   </div>

  <div class="product-line-price-l3">0.00</div>
 </div>

<div class="product-l3">
<div class="product-details-l3">
  <div class="product-title-l3">Product 2</div>
 </div>
  <div class="product-price-l3">60.00</div>
  <div class="product-quantity-l3">
  <input type="number" value="0" min="0">
 </div>
 <div class="product-line-price-l3">0.00</div>
 </div>

<div class="product-l3">
<div class="product-details-l3">
  <div class="product-title-l3">Product 3</div>
  </div>
  <div class="product-price-l3">45.00</div>
<div class="product-quantity-l3">
  <input type="number" value="0" min="0">
  </div>
  <div class="product-line-price-l3">0.00</div>
  </div>

 <div class="totals-l3">
<div class="totals-item-l3">
  <label>Subtotal</label>
  <div class="totals-value-l3" id="cart-subtotal-l3">0.00</div>
</div>
<div class="totals-item-l3">
  <label>Tax (8.25%)</label>
  <div class="totals-value-l3" id="cart-tax-l3">0.00</div>
</div>
<div class="totals-item-l3 totals-item-total-l3">
  <label>Grand Total</label>
  <div class="totals-value-l3" id="cart-total-l3">0.00</div>
</div>
 </div>

 <button class="checkout-l3">Checkout</button>

</div>

Answer 1

原因是你的updateQuantity正在定义productRow，例如：

var productRow = (quantityInput)
   .parent()
   .parent();
var price = parseFloat(productRow.children(".product-price-l3").text());

这反过来使price无法正确定义。如果你把它们变成：var productRow = $(quantityInput).parent().parent();它会起作用。另外，如果你想在h1和div之间留出空间，你可以添加以下内容：

.shopping-cart-l3{
  padding-top: 5%;
}

请参阅以下代码段：

/* Set rates + misc */
var taxRate = 0.0825;
var fadeTime = 300;

/* Assign actions */
$(".product-quantity-l3 input").change(function() {
  updateQuantity(this);
});

/* Recalculate cart */
function recalculateCart() {
  var subtotal = 0;

  /* Sum up row totals */
  $(".product-l3").each(function() {
    subtotal += parseFloat(
      $(this)
      .children(".product-line-price-l3")
      .text()
    );
  });

  /* Calculate totals */
  var tax = subtotal * taxRate;
  var total = subtotal + tax;

  /* Update totals display */
  $(".totals-value-l3").fadeOut(fadeTime, function() {
    $("#cart-subtotal-l3").html(subtotal.toFixed(2));
    $("#cart-tax-l3").html(tax.toFixed(2));
    $("#cart-total-l3").html(total.toFixed(2));
    if (total == 0) {
      $(".checkout-l3").fadeOut(fadeTime);
    } else {
      $(".checkout-l3").fadeIn(fadeTime);
    }
    $(".totals-value-l3").fadeIn(fadeTime);
  });
}

/* Update quantity */
function updateQuantity(quantityInput) {
  /* Calculate line price */
  var productRow = $(quantityInput).parent().parent();
  var price = parseFloat(productRow.children(".product-price-l3").text());
  var quantity = $(quantityInput).val();
  var linePrice = price * quantity;

  /* Update line price display and recalc cart totals */
  productRow.children(".product-line-price-l3").each(function() {
    $(this).fadeOut(fadeTime, function() {
      $(this).text(linePrice.toFixed(2));
      recalculateCart();
      $(this).fadeIn(fadeTime);
    });
  });
}

/* Add here all your css styles (customizations) */

/* Global settings */

/* Global "table" column settings */

.shopping-cart-l3{
  padding-top: 5%;
}

.product-details-l3 {
  float: left;
  width: 37%;
}

.product-price-l3 {
  float: left;
  width: 12%;
}

.product-quantity-l3 {
  float: left;
  width: 10%;
}

.product-line-price-l3 {
  float: left;
  width: 12%;
  text-align: right;
}

/* This is used as the traditional .clearfix class */

.group-l3 .shopping-cart-l3 .column-labels-l3 .product-l3 .totals-item-l3 {
  content: "";
  display: table;
}

.group-l3 .shopping-cart-l3 .column-labels-l3 .product-l3 .totals-item-l3 {
  clear: both;
}

.group-l3 .shopping-cart-l3 .column-labels-l3,
.product-l3 .totals-item-l3 {
  zoom: 1;
}

/* Apply clearfix in a few places */

/* Apply dollar signs */

.product-l3 .product-price-l3 .product-line-price-l3 .totals-value-l3 {
  content: "$";
}

/* Body/Header stuff */

}

h1 {
  font-weight: 100;
}

label {
  color: #aaa;
}

.shopping-cart-l3 {
  margin-top: -45px;
}

/* Column headers */

.column-labels-l3 .label-l3 {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.column-labels-l3 .product-image-l3 .product-details-l3 {
  text-indent: -9999px;
}

/* Product entries */

.product-l3 {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.product-l3 .product-details-l3 .product-title-l3 {
  margin-right: 20px;
  font-family: "Helvetica Neue Medium";
}

.product-l3 .product-quantity-l3 input {
  width: 40px;
}

/* Totals section */

.totals-l3 .totals-item-l3 {
  float: left;
  clear: both;
  width: 80%;
  margin-bottom: 10px;
}

.totals-l3 .totals-item-l3 .label-l3 {
  float: left;
  clear: both;
  width: 80%;
  text-align: right;
}

.totals-l3 .totals-item-l3 .totals-value-l3 {
  float: right;
  width: 20%;
  text-align: right;
}

.totals-l3 .totals-item-total-l3 {
  font-family: "Helvetica Neue Medium";
}

.checkout-l3 {
  float: left;
  border: 0;
  margin-top: 20px;
  padding: 6px 11px;
  background-color: #6b6;
  color: #fff;
  font-size: 20px;
  border-radius: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Products</h1>

<div class="shopping-cart-l3">

  <div class="column-labels-l3">
    <label class="product-details-l3">Product</label>
    <label class="product-price-l3">Price</label>
    <label class="product-quantity-l3">Quantity</label>
    <label class="product-line-price-l3">Total</label>
  </div>

  <div class="product-l3">
    <div class="product-details-l3">
      <div class="product-title-l3">Product 1</div>
    </div>
    <div class="product-price-l3">95.00</div>
    <div class="product-quantity-l3">
      <input type="number" value="0" min="0">
    </div>

    <div class="product-line-price-l3">0.00</div>
  </div>

  <div class="product-l3">
    <div class="product-details-l3">
      <div class="product-title-l3">Product 2</div>
    </div>
    <div class="product-price-l3">60.00</div>
    <div class="product-quantity-l3">
      <input type="number" value="0" min="0">
    </div>
    <div class="product-line-price-l3">0.00</div>
  </div>

  <div class="product-l3">
    <div class="product-details-l3">
      <div class="product-title-l3">Product 3</div>
    </div>
    <div class="product-price-l3">45.00</div>
    <div class="product-quantity-l3">
      <input type="number" value="0" min="0">
    </div>
    <div class="product-line-price-l3">0.00</div>
  </div>

  <div class="totals-l3">
    <div class="totals-item-l3">
      <label>Subtotal</label>
      <div class="totals-value-l3" id="cart-subtotal-l3">0.00</div>
    </div>
    <div class="totals-item-l3">
      <label>Tax (8.25%)</label>
      <div class="totals-value-l3" id="cart-tax-l3">0.00</div>
    </div>
    <div class="totals-item-l3 totals-item-total-l3">
      <label>Grand Total</label>
      <div class="totals-value-l3" id="cart-total-l3">0.00</div>
    </div>
  </div>

  <button class="checkout-l3">Checkout</button>

</div>