好资源导航 » 文章资讯 » 基于JQuery的购物车添加删除以及结算功能示例

基于JQuery的购物车添加删除以及结算功能示例

2024-02-28 02:26:04 44

前段时间了解到购物车结算算是一个难点部分，在网上也找了一些，但是网上除了插件之外，就是一些半成品，比如一部分只有添加删除效果，另一部分只有结算功能，很少见到整合在一起的购物车效果，因此自己写了一个，方便大家查看
（添加效果没有飞入，实在懒得写动画效果了，凑合看吧）

HTML部分

2014年春季爆品A

$10点击购买

2014年春季爆品B

$20点击购买

2014年春季爆品C

$30点击购买

2014年春季爆品D

$40点击购买

购
物
车

总价：0元

functionview(){ return{ w:document.documentElement.clientWidth, h:document.documentElement.clientHeight }; } document.body.style.height=view().h+"px";

JS部分

$(function(){
varmark=0;
$(".car").on("click",function(){
if(mark==0){
$("#carlist").animate({marginRight:"0px"},500)
mark=1;
}else{
$("#carlist").animate({marginRight:"-260px"},500)
mark=0
}
})


//点击购买按钮添加至购物车
varbuyButton=$(".buy");
buyButton.on("click",BuyClick)

functionBuyClick(){
varthingsName=$(this).parents("li").find(".things_name").text();
varthingsPrice=$(this).parent().find("i").text();
varthingsImage=$(this).parents("li").find("img").attr("src");
varkNum=$(this).parents("li").attr("num")
varGeshu=1;
$(this).off("click").text("已经添加至购物车");

$(".list").append(''+thingsName+'
$'+thingsPrice+'
-1+删除');
countTotalPrice();
totalGeshu();

//点击加号添加商品个数

$(".add").off("click").on("click",function(){
Geshu=parseInt($(this).parent().find("span:nth-of-type(2)").text())
Geshu++
$(this).parent().find("span:nth-of-type(2)").text(Geshu)
countTotalPrice();
totalGeshu();
})

//动态生成的元素点击减号减少商品个数
$(".minus").off("click").on("click",function(){
Geshu=parseInt($(this).parent().find("span:nth-of-type(2)").text());
if(Geshu>1){
Geshu--;
$(this).parent().find("span:nth-of-type(2)").text(Geshu)
}else{
Geshu==1;
}
countTotalPrice();
totalGeshu();
})

//删除购物车内的商品
vardel=$(".del");
del.each(function(){
$(this).off("click").on("click",function(){
vardelName=$(this).parents(".things").find(".name").text();
$(this).parents(".things").remove();
countTotalPrice();
totalGeshu();
varoldBtn=$("#containerulli").find("span:contains("+delName+")").parents("li").find(".buy")
oldBtn.on("click",BuyClick).text("点击购买")
})
})

//计算总价函数
functioncountTotalPrice(){
vartotalPrice=0,listThings=$(".list").find(".things");
for(vari=0;i0){
vartotalGeshu=0;
listThings.each(function(){
varthis_geshu=parseInt($(this).find(".zengjianspan:nth-of-type(2)").text());
totalGeshu+=this_geshu;
})
$(".carLogospan").html(totalGeshu)
}else{
$(".carLogospan").css("display","none")
}
}
}
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

基于JQuery的购物车添加删除以及结算功能示例

热门推荐

随机推荐