js购物车数量增减，总价格联动变化
前端JS实现购物车功能，点击商品加减按钮商品数量加减，点击单选按钮和全选按钮颜⾊变化，总价联动变化。项⽬中应⽤的都是bootstrap的样式，css就不⼀⼀贴出来了。
加函数，减函数，⼿动修改数量判断库存函数，总价格计算函数，单选事件，全选事件，⼀共分为6个事件
<div class="orderwrap">
<div class="ordertouch clearfix">
<div class="ordercont">
<div class="orderitem clearfix" priceOne>
<div class="col-xs-1 clearPadding"></div>
<div class="col-xs-3 clearPadding">
<a href="">
<img src="" alt="" class="img-responsive">
</a>
</div>
<div class="col-xs-7 clearPadding pl10">
<div class="proname"><a href="">原味⼿剥⼤⽠⼦</a></div>
<div class="prodetail">
<span class="font14 color-orange">￥<strong class="unitprice" unitprice>9.9</strong></span>
<span class="pro_oriprice"><del>19.9</del></span>
<span class="color82 font12">库存：100</span>
</div>
<div class="pronum">
<div class="pull-left input-group">
<div class="num">数量：</div>
<div class="btn-add omin" οnclick="minus(this,'9.9','100');" >
<span class="glyphicon glyphicon-minus"></span>
</div>
<input type="text" class="btn-num onum" value="" name='count' οnblur='amount_input(this,"9.9","100")' >
<div class="btn-add oplus" οnclick="plus(this,'9.9}','100}');" >
<span class="glyphicon glyphicon-plus"></span>
</div>
</div>
</div>
</div>
<div class="col-xs-1 clearPadding"></div>
<i class="iconfont o-label op-label checkitem" productid='}'> </i>
<a href=""><div class="o-more"></div></a>
</div>
</div>
<div class="btn-del" οnclick="btndel('',this)">删除</div>
</div>
</div>
<div class="bottoms checkoutbox">
<div class="col-xs-8 bordertop borderbottom">
<div class="pull-left">
<i class="o-label checkall iconfont" id="checkall"> </i>
<span class="qxposition">全选</span>
</div>
<div class="pull-right">
<div class="">合计：￥ <span class="font14 color-orange allprice" id="allprice">0</span></div>
<div class="font12">不含运费</div>
</div>
</div>
<div class="col-xs-4 clearPadding"><button class="btn-checkout" οnclick="sbm();">结算（<span class="allnum" id="amount">0</span>）</button></div> </div>
//计算总价
function setTotal(){
var allprice=0;//总价格
var allnum=0;//总数量
$(".checkitem").each(function(){
if($(this).hasClass('oncheck')){
var num=parseInt($(this).parents('[priceOne]').find('input[name=count]').val());//单个商品的购买数量 var price=$(this).parents('[priceOne]').find('[unitprice]').text();//商品单价需要从后台获取
allprice+=num*price;//每样商品的总价
allnum+=num;
}
})
$(".allprice").Fixed(2));
$(".allnum").html(allnum);
}
setTotal();
//⼿动修改⽂本框商品数量与库存的限制
function amount_input(tag,sellprice,stock){
var amount=parseInt($(tag).val());
if(isNaN(amount)){
js购物车结算代码layer.msg('最少购买量为1');
$(tag).val(1);
}else{
if(amount>stock){
layer.msg('购买数量不能⼤于库存');
$(tag).val(stock);
}else if(amount<1){
layer.msg('最少购买量为1');
$(tag).val(1);
}
}
var val=parseFloat(sellprice)*parseInt($(tag).val());
setTotal();
}
// 全选
$('#checkall').click(function(){
$(this).toggleClass('oncheck');
if($(this).hasClass('oncheck')){
$('.checkitem').addClass('oncheck');
setTotal();
}else{
$('.checkitem').removeClass('oncheck');
setTotal();
}
});
//单选
$('.checkitem').click(function(){
$(this).toggleClass('oncheck');
var itemsleng=$('.checkitem').length;
var checkedleng=$('[priceOne]').find('i').filter('.oncheck').length;
if(checkedleng==itemsleng){
$('.checkall').addClass('oncheck');
setTotal();
}else{
$('.checkall').removeClass('oncheck');
setTotal();
}
});
// 购买数量加
function plus(tag,sellprice,stock){
var _this=$(tag);
var input=_this.prev('input');
var input=_this.prev('input');
if(_this.prev('input[disabled]').length>0){ return;
}
var amount=parseInt(input.val());
amount++;
if(amount>stock){
return layer.msg('购买数量不能⼤于库存'); }else{
input.val(amount);
setTotal();
}
}
// 购买数量减
function minus(tag,sellprice,stock){
var _this=$(tag);
var input=_('input');
if(_('input[disabled]').length>0){ return;
}
var amount=parseInt(input.val());
amount--;
if(amount<=0){
return layer.msg('购买数量不能⼩于1'); }else{
input.val(amount);
setTotal();
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论