今天簡單寫了一個jq版購物車計算金額總和的例子，如圖：

整體頁面代碼如下：

*{

list-style: none;

}

html,body{

margin: 0;

padding: 0;

}

.all-list{

padding: 40px;

margin: 0 auto;

}

.choose-list{

overflow: hidden;

}

.choose-list >h5{

display: block;

font-size: 14px;

color: #666666;

padding: 13px 0;

font-weight: normal;

}

.choose-container{

overflow: hidden;

border: 1px solid #DDDDDD;

box-sizing: border-box;

}

.choose-header{

overflow: hidden;

background-color: #F9FAFB;

padding: 0 48px;

}

.choose-header ul{

overflow: hidden;

}

.choose-header ul li{

float: left;

width: 20%;

text-align: center;

padding: 15px 0;

font-size: 12px;

color: #666666;

}

.choose-content{

padding: 0 48px;

overflow: hidden;

}

.choose-content ul{

overflow: hidden;

}

.choose-content ul li{

float: left;

width: 20%;

text-align: center;

padding: 15px 0;

line-height: 28px;

color: #555555;

}

.add-number{

overflow: hidden;

display: inline-block;

}

.choose-content ul li .number-input{

float: left;

width: 70px;

height: 28px;

border-top: 1px;

border-bottom: 1px;

border-color: #CCCCCC;

border-style: solid none;

box-sizing: border-box;

line-height: 28px;

outline: none;

text-align: center;

color: #FE5200;

}

.choose-content ul li .minus,.choose-content ul li .add{

float: left;

width: 28px;

height: 28px;

background-color: #F9FAFB;

font-size: 14px;

outline: none;

border: 1px solid #CCCCCC;

box-sizing: border-box;

}

.choose-content ul li >span{

color: #FE5200;

}

.choose-footer{

display: flex;

justify-content: space-between;

padding: 28px 48px;

background-color: #F9FAFB;

}

.choose-footer .require{

color: #FE5200;

font-size: 14px;

align-self: center;

}

.total-price{

overflow: hidden;

}

.total-price >span{

display: block;

font-size: 14px;

color: #555555;

padding: 6px 0;

}

.total-price >span em{

font-style: initial;

text-decoration:line-through;

}

.total-price >span i{

font-style: initial;

}

.prices{

color: #EA4335 !important;

}

.pay-button{

padding: 50px 0;

float: right;

}

.pay-num{

overflow: hidden;

display: flex;

flex-direction: column;

}

.pay-num span{

float: right;

width: 100%;

font-size: 14px;

color: #666666;

text-align: center;

padding-bottom: 20px;

}

.pay-num span small{

font-size: 18px;

color: #EA4335;

}

.pay-num button{

float: right;

padding: 15px 72px;

background-color: #bebebe;

border: none;

outline: none;

font-size: 14px;

color: #ffffff;

border-radius: 3px;

cursor: not-allowed;

}

.pay-num button.state-buys{

background-color: #EA4335;

cursor: default;

}

$(function(){

addMoney();

//增加按鈕事件

$(document).on('click','.add-number .add',function(){

var _input = $(this).siblings('.number-input');

$(this).siblings('.number-input').val(parseInt(_input.val()) + 1);

addMoney();

});

//減少按鈕事件

$(document).on('click','.add-number .minus',function(){

var _input = $(this).siblings('.number-input');

var _val = parseInt(_input.val()) - 1;

if(_val <0){

$(this).siblings('.number-input').val('0');

}else{

$(this).siblings('.number-input').val(_val);

}

addMoney();

});

//input 輸入事件

$('.number-input').keyup(function(){

addMoney();

});

//input失焦事件

$('.number-input').blur(function(){

var this_val = $(this).val();

if(this_val == '' || this_val == 'undefind'){

$(this).val('0');

}else{

$(this).val(this_val);

}

});

//金額計算

function addMoney(){

var now_total = 0,

old_total= 0;

$('.choose-content ul').each(function(index){

var oldPrice = $(this).find('.old-price').attr('data-price');

var nowPrice = $(this).find('.now-price').attr('data-price');

var numbers = $(this).find('.number-input').val();

var old_price_total = oldPrice * numbers;

var now_price_total = nowPrice * numbers;

// console.log(old_price_total,now_price_total);

if(now_price_total == 0){

$(this).find('.now-total-price').html(now_price_total);

}else{

$(this).find('.now-total-price').html('￥' + now_price_total);

}

now_total += now_price_total;

old_total += old_price_total;

$('.total-price span em').html(old_total);

$('.total-price span i').html(now_total);

$('.pay-num span small').html('￥' + now_total + '元');

if(now_total >= 300){

$('.pay-num button').addClass('state-buys');

}else{

$('.pay-num button').removeClass('state-buys');

}

})

}

})