纯jquery实现模仿淘宝购物车结算

这篇文章里，将会提到购物车里的所有功能。包括全选、单选金额改变。在增加数量时金额也会相应改变。

效果图展示：

说下大致的思路吧：

1、首先是计算一行的价格。这个功能在上篇博客里有提到，这里就不列举出来了。

2、遍历选中的几行，将每行的数值相加。

3、将值赋给总金额显示出来。当取消勾选或加减数量时，金额会相应改变。

下面是具体的射流研究…部分：

脚本类型=' text/JavaScript ' $(function(){//计算总金额函数total money(){ var total _ price=0；var total _ count=0；$(.D1输入').每个（函数(){ if($(this)).有类(' status '){ var obj 1=$(this).父项()。兄弟姐妹(' .d4 ').查找('。计数')。val()；//获取一行的商品数量total _ count=ParSeint(obj 1)；var obj2=$(this).父项()。兄弟姐妹(' .d5 ').查找('。购物车-价格')。text()；//获取一行的金额total _ price=ParSeint(obj 2)；} });$('.项目')。文本(总计_计数)；//将计算出的总金额显示$('.总计')。文本（总价);//将计算出的总数量显示} //全选$('.d输入')。切换(函数(){ $(this)).addCLaSS(' status ')；$('.sc-中间列表。D1输入')。addCLaSS(' status ')；//添加勾选样式$('.sc-中间列表')。添加CLaSS('鼠标悬停')；货币总额()；}，function(){ $(this).removeClass(“”状态');$('.sc-中间列表。D1输入')。removeClass(“”状态');//取消勾选样式$('.sc-中间列表')。移除CLaSS('鼠标悬停')；货币总额()；});//单选$(.D1输入').切换(函数(){ $(this)).addCLaSS(' status ')；//添加勾选样式$(这个)。父母('。sc-中间列表')。添加CLaSS('鼠标悬停')；货币总额()；}，function(){ $(this).removeClass(“”状态');//取消勾选样式$(这个)。父母('。sc-中间列表')。移除CLaSS('鼠标悬停')；货币总额()；});//减号样式函数计数(){ $('。计数')。每个（函数(){ var num=$(this)).val()；if (num==1) { $(this).兄弟姐妹('。减少')。removeClass("两个")。添加CLaSS(' one ')；$(这个)。兄弟姐妹('。减少')。attr('disabled '，' disabled ')；} else { $(this).兄弟姐妹('。减少')。removeClass('one ').addCLaSS(' two ')；} })//根据数量是否为1,改变减号的样式} //加$('.sc-中间名单。添加')。点击(函数(){ var input=$(this)).兄弟姐妹('。count’)；var obj=$(this).父母(' .D4 ')；var per=parseFloat(obj。姐弟(' .d3 ').查找('。per ').text())；//获取当前一行的单价var num=var price=input . attr(' value ')、parsent(input。attr(' value ')1)；//数量加1 num=输入。attr(' value ')；price=num * per//obj。姐弟(' .d5 ').查找('。购物车-价格')。文字（价格);count()；货币总额()；}) //减$('.sc-中间名单。减少')。点击(函数(){ var input=$(this)).兄弟姐妹('。count’)；var obj=$(this).父母(' .D4 ')；var per=parseFloat(obj。姐弟(' .d3 ').查找('。per ').text())；//获取当前一行的单价var num=var price=var Val=ParSeint(输入。attr(' value ')；if(Val=1){ Val=2；} input.attr('value '，ParSeint(Val)-1)；//数量减1 num=输入。attr(' value ')；price=num * per//obj。姐弟(' .d5 ').查找('。购物车-价格')。文字（价格);count()；}) })/scriptjquery模仿淘宝悬挂购物车物品结算功能-附源码下载

查看演示源码下载