我正在使用HTML / CSS和JQuery创建购物车，但遇到两件事：
当我更新数量时，则不会更新小计，税金和总价值，其次是在立即购买按钮上，我必须将数据发布到json。
这是我在JSfiddle中的代码
var taxRate = 0.2;
//var shippingRate = 15.00;
var fadeTime = 300;
/* Assign actions */
$('.shoppingBasket-items__qty input').change( function() {
updateQuantity(this);
recalculateCart();
});
$('.remove-item').click( function() {
removeItem(this);
});
/* Recalculate cart */
function recalculateCart() {
var subtotal = 0;
/* Sum up row totals */
$('.shoppingBasket-items').each(function () {
subtotal += parseFloat($(this).children('.shoppingBasket-items__price').text());
});
/* Calculate Sub-totals */
var tax = subtotal * taxRate;
var total = subtotal + tax;
/* Calculate totals */
var tax = subtotal * taxRate;
var total = subtotal + tax;
/* Update totals display */
$('.shoppingBasket-total__cost').fadeIn(fadeTime, function() {
$('#cart-subtotal').html(subtotal.toFixed(2));
$('#cart-tax').html(tax.toFixed(2));
//$('#cart-shipping').html(shipping.toFixed(2));
$('#cart-total').html(total.toFixed(2));
if(total == 0){
$('.checkout').fadeOut(fadeTime);
}else{
$('.checkout').fadeIn(fadeTime);
}
$('.totals-value').fadeIn(fadeTime);
});
}
recalculateCart();
/* Update quantity */
function updateQuantity(quantityInput)
{
/* Calculate line price */
var productRow = $(quantityInput).parent().parent();
var price = parseFloat(productRow.children('.shoppingBasket-items__cost').text());
var quantity = $(quantityInput).val();
var linePrice = price * quantity;
/* Update line price display and recalc cart totals */
productRow.children('.shoppingBasket-items__cost').each(function () {
$(this).fadeOut(fadeTime, function() {
$(this).text(linePrice.toFixed(2));
recalculateCart();
$(this).fadeIn(fadeTime);
});
});
recalculateCart();
}
/* Remove item from cart */
function removeItem(removeButton)
{
/* Remove row from DOM and recalc cart total */
var productRow = $(removeButton).parent().parent();
productRow.slideUp(fadeTime, function() {
productRow.remove();
recalculateCart();
});
}/* ---Shopping header--- */
.shoppingBasket {
float: left;
width: 90%;
padding:0 40px;
font-size: 14px;
}
.shoppingBasket-labels {
width: 100%;
float: left;
border-bottom: 2px solid #999999;
padding: 0 15px;
}
.shoppingBasket-labels__productTitle {
width: 55%;
float: left;
}
.shoppingBasket-labels__productPrice {
width: 15%;
float: left;
}
.shoppingBasket-labels__productQty {
width: 15%;
float: left;
}
.shoppingBasket-labels__productCost {
width: 15%;
float: left;
text-align: right;
}
/* ---Shopping items--- */
.shoppingBasket-items {
width: 100%;
float: left;
padding: 8px 15px;
line-height: 26px;
position: relative;
}
.shoppingBasket-items:nth-child(odd) {
background-color:#dddddd;
}
.shoppingBasket-items:nth-child(even) {
background-color:transparent;
}
.shoppingBasket-items__title {
width: 55%;
float: left;
}
.shoppingBasket-items__price {
width: 15%;
float: left;
text-align: center;
}
.shoppingBasket-items__qty {
width: 15%;
float: left;
text-align: center;
}
.shoppingBasket-items__qty > input{
width: 40px;
text-align: right;
min-height: 26px;
}
.shoppingBasket-items__cost {
width: 15%;
float: left;
text-align: right;
}
.remove-item {
position: absolute;
right: -40px;
top: 50%;
margin-top: -5px;
cursor: pointer;
}
.remove-item > svg {
width: 1em;
height: 1em;
}
.quantity {
display: inline-block;
vertical-align: middle;
}
.quantity > span {
color: #fff;
background: #999999;
display: block;
padding: 0 4px;
font-size: 10px;
cursor: pointer;
line-height: normal;
}
.quantity > span:hover{
background: #333333;
}
.quantity > span:first-child{
margin-bottom: 1px;
}
.remove-item > svg path{
fill: #030368;
}
.shoppingBasket-subtotal,
.shoppingBasket-vat,
.shoppingBasket-total,
.shoppingBasket-checkout {
width: 100%;
float: left;
padding: 0 15px;
}
.shoppingBasket-subtotal__label,
.shoppingBasket-vat__label,
.shoppingBasket-total__label {
width: 85%;
float: left;
}
.shoppingBasket-subtotal__cost,
.shoppingBasket-vat__cost,
.shoppingBasket-total__cost {
width: 15%;
float: left;
text-align: right;
}
.shoppingBasket-checkout .btn-checkout {
float: right;
background: #000066;
border: 0;
padding: 8px 12px;
color: #ffffff;
font-weight: bold;
font-size: 16px;
border-radius: 6px;
box-shadow: 1px 2px 6px 1px rgba(0,0,0,0.45);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="shoppingBasket">
<div class="shoppingBasket-labels">
<div class="shoppingBasket-labels__productTitle">Product</div>
<div class="shoppingBasket-labels__productPrice text-center">Price</div>
<div class="shoppingBasket-labels__productQty text-center">Qty</div>
<div class="shoppingBasket-labels__productCost text-center">Cost</div>
</div>
<div class="shoppingBasket-items">
<div class="shoppingBasket-items__title">Cotton T-Shirt, Medium</div>
<div class="shoppingBasket-items__price">1.99</div>
<div class="shoppingBasket-items__qty">
<input type="text" value="1">
<div class="quantity">
<span class="quantity-increse">+</span>
<span class="quantity-decrease">-</span>
</div>
</div>
<div class="shoppingBasket-items__cost">
1.99
</div>
<span class="remove-item">
<svg viewBox="0 0 20 20">
<path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667
c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14
c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583
C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167
c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083
z"></path>
</svg>
</span>
</div>
<div class="shoppingBasket-items">
<div class="shoppingBasket-items__title">Baseball Cap, One Size</div>
<div class="shoppingBasket-items__price">2.99</div>
<div class="shoppingBasket-items__qty">
<input type="text" value="1">
<div class="quantity">
<span class="quantity-increse">+</span>
<span class="quantity-decrease">-</span>
</div>
</div>
<div class="shoppingBasket-items__cost">
2.99
</div>
<span class="remove-item">
<svg viewBox="0 0 20 20">
<path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667
c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14
c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583
C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167
c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083
z"></path>
</svg>
</span>
</div>
<div class="shoppingBasket-items">
<div class="shoppingBasket-items__title">Cotton T-Shirt, Medium</div>
<div class="shoppingBasket-items__price">3.99</div>
<div class="shoppingBasket-items__qty">
<input type="text" value="1">
<div class="quantity">
<span class="quantity-increse">+</span>
<span class="quantity-decrease">-</span>
</div>
</div>
<div class="shoppingBasket-items__cost">
3.99
</div>
<span class="remove-item">
<svg viewBox="0 0 20 20">
<path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667
c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14
c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583
C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167
c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083
z"></path>
</svg>
</span>
</div>
<div class="shoppingBasket-subtotal grey mar-top-40">
<div class="shoppingBasket-subtotal__label">Subtotal</div>
<div class="shoppingBasket-subtotal__cost" id="cart-subtotal"></div>
</div>
<div class="shoppingBasket-vat grey mar-bot-40">
<div class="shoppingBasket-vat__label">VAT @ 20%</div>
<div class="shoppingBasket-vat__cost" id="cart-tax"></div>
</div>
<div class="shoppingBasket-total mar-bot-40">
<div class="shoppingBasket-total__label"><strong> Total Cost</strong></div>
<div class="shoppingBasket-total__cost" id="cart-total"></div>
</div>
<div class="shoppingBasket-checkout">
<button class="btn-checkout">Buy Now >></button>
</div>
</div>
答案 0 :(得分：1)
在recalculateCart（）函数上，您需要将价格乘以数量。这是解决方案：
var taxRate = 0.2;
//var shippingRate = 15.00;
var fadeTime = 300;
/* Assign actions */
$('.shoppingBasket-items__qty input').change( function() {
updateQuantity(this);
recalculateCart();
});
$('.remove-item').click( function() {
removeItem(this);
});
/* Recalculate cart */
function recalculateCart() {
var subtotal = 0;
/* Sum up row totals */
$('.shoppingBasket-items').each(function () {
subtotal += (parseFloat($(this).children('.shoppingBasket-items__price').text()) * $(this).children('.shoppingBasket-items__qty').find('[type="text"]').val());
});
/* Calculate Sub-totals */
var tax = subtotal * taxRate;
var total = subtotal + tax;
/* Calculate totals */
var tax = subtotal * taxRate;
var total = subtotal + tax;
/* Update totals display */
$('.shoppingBasket-total__cost').fadeIn(fadeTime, function() {
$('#cart-subtotal').html(subtotal.toFixed(2));
$('#cart-tax').html(tax.toFixed(2));
//$('#cart-shipping').html(shipping.toFixed(2));
$('#cart-total').html(total.toFixed(2));
if(total == 0){
$('.checkout').fadeOut(fadeTime);
}else{
$('.checkout').fadeIn(fadeTime);
}
$('.totals-value').fadeIn(fadeTime);
});
}
recalculateCart();
/* Update quantity */
function updateQuantity(quantityInput)
{
/* Calculate line price */
var productRow = $(quantityInput).parent().parent();
var price = parseFloat(productRow.children('.shoppingBasket-items__cost').text());
var quantity = $(quantityInput).val();
var linePrice = price * quantity;
/* Update line price display and recalc cart totals */
productRow.children('.shoppingBasket-items__cost').each(function () {
$(this).fadeOut(fadeTime, function() {
$(this).text(linePrice.toFixed(2));
recalculateCart();
$(this).fadeIn(fadeTime);
});
});
recalculateCart();
}
/* Remove item from cart */
function removeItem(removeButton)
{
/* Remove row from DOM and recalc cart total */
var productRow = $(removeButton).parent().parent();
productRow.slideUp(fadeTime, function() {
productRow.remove();
recalculateCart();
});
}/* ---Shopping header--- */
.shoppingBasket {
float: left;
width: 90%;
padding:0 40px;
font-size: 14px;
}
.shoppingBasket-labels {
width: 100%;
float: left;
border-bottom: 2px solid #999999;
padding: 0 15px;
}
.shoppingBasket-labels__productTitle {
width: 55%;
float: left;
}
.shoppingBasket-labels__productPrice {
width: 15%;
float: left;
}
.shoppingBasket-labels__productQty {
width: 15%;
float: left;
}
.shoppingBasket-labels__productCost {
width: 15%;
float: left;
text-align: right;
}
/* ---Shopping items--- */
.shoppingBasket-items {
width: 100%;
float: left;
padding: 8px 15px;
line-height: 26px;
position: relative;
}
.shoppingBasket-items:nth-child(odd) {
background-color:#dddddd;
}
.shoppingBasket-items:nth-child(even) {
background-color:transparent;
}
.shoppingBasket-items__title {
width: 55%;
float: left;
}
.shoppingBasket-items__price {
width: 15%;
float: left;
text-align: center;
}
.shoppingBasket-items__qty {
width: 15%;
float: left;
text-align: center;
}
.shoppingBasket-items__qty > input{
width: 40px;
text-align: right;
min-height: 26px;
}
.shoppingBasket-items__cost {
width: 15%;
float: left;
text-align: right;
}
.remove-item {
position: absolute;
right: -40px;
top: 50%;
margin-top: -5px;
cursor: pointer;
}
.remove-item > svg {
width: 1em;
height: 1em;
}
.quantity {
display: inline-block;
vertical-align: middle;
}
.quantity > span {
color: #fff;
background: #999999;
display: block;
padding: 0 4px;
font-size: 10px;
cursor: pointer;
line-height: normal;
}
.quantity > span:hover{
background: #333333;
}
.quantity > span:first-child{
margin-bottom: 1px;
}
.remove-item > svg path{
fill: #030368;
}
.shoppingBasket-subtotal,
.shoppingBasket-vat,
.shoppingBasket-total,
.shoppingBasket-checkout {
width: 100%;
float: left;
padding: 0 15px;
}
.shoppingBasket-subtotal__label,
.shoppingBasket-vat__label,
.shoppingBasket-total__label {
width: 85%;
float: left;
}
.shoppingBasket-subtotal__cost,
.shoppingBasket-vat__cost,
.shoppingBasket-total__cost {
width: 15%;
float: left;
text-align: right;
}
.shoppingBasket-checkout .btn-checkout {
float: right;
background: #000066;
border: 0;
padding: 8px 12px;
color: #ffffff;
font-weight: bold;
font-size: 16px;
border-radius: 6px;
box-shadow: 1px 2px 6px 1px rgba(0,0,0,0.45);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="shoppingBasket">
<div class="shoppingBasket-labels">
<div class="shoppingBasket-labels__productTitle">Product</div>
<div class="shoppingBasket-labels__productPrice text-center">Price</div>
<div class="shoppingBasket-labels__productQty text-center">Qty</div>
<div class="shoppingBasket-labels__productCost text-center">Cost</div>
</div>
<div class="shoppingBasket-items">
<div class="shoppingBasket-items__title">Cotton T-Shirt, Medium</div>
<div class="shoppingBasket-items__price">1.99</div>
<div class="shoppingBasket-items__qty">
<input type="text" value="1">
<div class="quantity">
<span class="quantity-increse">+</span>
<span class="quantity-decrease">-</span>
</div>
</div>
<div class="shoppingBasket-items__cost">
1.99
</div>
<span class="remove-item">
<svg viewBox="0 0 20 20">
<path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667
c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14
c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583
C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167
c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083
z"></path>
</svg>
</span>
</div>
<div class="shoppingBasket-items">
<div class="shoppingBasket-items__title">Baseball Cap, One Size</div>
<div class="shoppingBasket-items__price">2.99</div>
<div class="shoppingBasket-items__qty">
<input type="text" value="1">
<div class="quantity">
<span class="quantity-increse">+</span>
<span class="quantity-decrease">-</span>
</div>
</div>
<div class="shoppingBasket-items__cost">
2.99
</div>
<span class="remove-item">
<svg viewBox="0 0 20 20">
<path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667
c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14
c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583
C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167
c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083
z"></path>
</svg>
</span>
</div>
<div class="shoppingBasket-items">
<div class="shoppingBasket-items__title">Cotton T-Shirt, Medium</div>
<div class="shoppingBasket-items__price">3.99</div>
<div class="shoppingBasket-items__qty">
<input type="text" value="1">
<div class="quantity">
<span class="quantity-increse">+</span>
<span class="quantity-decrease">-</span>
</div>
</div>
<div class="shoppingBasket-items__cost">
3.99
</div>
<span class="remove-item">
<svg viewBox="0 0 20 20">
<path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667
c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14
c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583
C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167
c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083
z"></path>
</svg>
</span>
</div>
<div class="shoppingBasket-subtotal grey mar-top-40">
<div class="shoppingBasket-subtotal__label">Subtotal</div>
<div class="shoppingBasket-subtotal__cost" id="cart-subtotal"></div>
</div>
<div class="shoppingBasket-vat grey mar-bot-40">
<div class="shoppingBasket-vat__label">VAT @ 20%</div>
<div class="shoppingBasket-vat__cost" id="cart-tax"></div>
</div>
<div class="shoppingBasket-total mar-bot-40">
<div class="shoppingBasket-total__label"><strong> Total Cost</strong></div>
<div class="shoppingBasket-total__cost" id="cart-total"></div>
</div>
<div class="shoppingBasket-checkout">
<button class="btn-checkout">Buy Now >></button>
</div>
</div>
答案 1 :(得分：0)
你的计算是错误的，如果你添加数量 2，数量会改变，但如果你把它改回 1，它不会显示计算