基于JQuery的购物车添加删除以及结算功能示例
程序员文章站
2023-12-13 08:42:22
前段时间了解到购物车结算算是一个难点部分，在网上也找了一些，但是网上除了插件之外，就是一些半成品，比如一部分只有添加删除效果，另一部分只有结算功能，很少见到整合在一起的购物...
前段时间了解到购物车结算算是一个难点部分，在网上也找了一些，但是网上除了插件之外，就是一些半成品，比如一部分只有添加删除效果，另一部分只有结算功能，很少见到整合在一起的购物车效果，因此自己写了一个，方便大家查看
（添加效果没有飞入，实在懒得写动画效果了，凑合看吧）
html部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="css/index.css" rel="external nofollow" >
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<div id="banner"></div>
<div id="container">
<ul>
<li num="1"><img src="images/1.jpg"/><span class="things_name">2014年春季爆品a<p>$<i>10</i><span class="buy">点击购买</p></li>
<li num="2"><img src="images/2.jpg"/><span class="things_name">2014年春季爆品b<p>$<i>20</i><span class="buy">点击购买</p></li>
<li num="3"><img src="images/3.jpg"/><span class="things_name">2014年春季爆品c<p>$<i>30</i><span class="buy">点击购买</p></li>
<li num="4"><img src="images/4.jpg"/><span class="things_name">2014年春季爆品d<p>$<i>40</i><span class="buy">点击购买</p></li>
</ul>
</div>
<div id="carlist">
<div class="car">
<div>
<span class="carlogo"><span><img src="images/car.png"/>
<span class="txt">购<br />物<br />车
</div>
</div>
<div class="list">
<!--此处添加动态元素-->
<div class="total">
<span>总价：<span>0元
</div>
</div>
</div>
<script type="text/javascript">
function view(){
return{
w:document.documentelement.clientwidth,
h:document.documentelement.clientheight
};
}
document.body.style.height=view().h+"px";
</script>
</body>
</html>
js部分
$(function(){
var mark=0;
$(".car").on("click",function(){
if(mark==0){
$("#carlist").animate({marginright:"0px"},500)
mark=1;
}else{
$("#carlist").animate({marginright:"-260px"},500)
mark=0
}
})
//点击购买按钮添加至购物车
var buybutton=$(".buy");
buybutton.on("click",buyclick)
function buyclick(){
var thingsname=$(this).parents("li").find(".things_name").text();
var thingsprice=$(this).parent().find("i").text();
var thingsimage=$(this).parents("li").find("img").attr("src");
var knum=$(this).parents("li").attr("num")
var geshu=1;
$(this).off("click").text("已经添加至购物车");
$(".list").append('<div class="select things" num='+knum+'><img src='+thingsimage+'/><p class="name">'+thingsname+'</p><p class="price">$<i>'+thingsprice+'</i></p><ul class="caozuo"><li class="zengjian"><span class="minus">-<span>1<span class="add">+</li><li class="del">删除</li></ul></div>');
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();
})
//删除购物车内的商品
var del=$(".del");
del.each(function(){
$(this).off("click").on("click",function(){
var delname=$(this).parents(".things").find(".name").text();
$(this).parents(".things").remove();
counttotalprice();
totalgeshu();
var oldbtn=$("#container ul li").find("span:contains("+delname+")").parents("li").find(".buy")
oldbtn.on("click",buyclick).text("点击购买")
})
})
//计算总价函数
function counttotalprice(){
var totalprice=0,listthings=$(".list").find(".things");
for (var i=0;i<listthings.length;i++) {
var this_geshu=parseint(listthings.eq(i).find(".zengjian span:nth-of-type(2)").text());
var this_price=parseint(listthings.eq(i).find(".price i").text());
totalprice+=this_geshu*this_price;
}
$(".total span").eq(1).text(totalprice);
totalgeshu();
}
//购物车上的商品总数
function totalgeshu(){
var listthings=$(".list").find(".things");
if (listthings.length>0) {
var totalgeshu=0;
listthings.each(function(){
var this_geshu=parseint($(this).find(".zengjian span:nth-of-type(2)").text());
totalgeshu+=this_geshu;
})
$(".carlogo span").html(totalgeshu)
} else{
$(".carlogo span").css("display","none")
}
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。