这篇文章里,将会提到购物车里的所有功能。包括全选、单选金额改变。在增加数量时金额也会相应改变。
效果图展示:
说下大致的思路吧:
1、首先是计算一行的价格。这个功能在上篇博客里有提到,这里就不列举出来了。
2、遍历选中的几行,将每行的数值相加。
3、将值赋给总金额显示出来。当取消勾选或加减数量时,金额会相应改变。
下面是具体的js部分:
<script type="text/javascript"> $(function(){ //计算总金额 function totalMoney(){ var total_price = 0; var total_count = 0; $(".d1-input").each(function(){ if($(this).hasClass('status')) { var obj1 = $(this).parent().siblings(".d4").find(".count").val();//获取一行的商品数量 total_count += parseInt(obj1); var obj2= $(this).parent().siblings(".d5").find(".cart-price").text();//获取一行的金额 total_price += parseInt(obj2); } }); $(".item").text(total_count);//将计算出的总金额显示 $(".total").text(total_price);//将计算出的总数量显示 } //全选 $(".d-input").toggle( function(){ $(this).addClass("status"); $(".sc-mid-list .d1-input").addClass("status");//添加勾选样式 $(".sc-mid-list").addClass("mouseover"); totalMoney(); }, function(){ $(this).removeClass("status"); $(".sc-mid-list .d1-input").removeClass("status");//取消勾选样式 $(".sc-mid-list").removeClass("mouseover"); totalMoney(); }); // 单选 $(".d1-input").toggle( function(){ $(this).addClass("status");//添加勾选样式 $(this).parents(".sc-mid-list").addClass("mouseover"); totalMoney(); }, function(){ $(this).removeClass("status");//取消勾选样式 $(this).parents(".sc-mid-list").removeClass("mouseover"); totalMoney(); }); // 减号样式 function count(){ $(".count").each(function(){ var num = $(this).val(); if (num == 1) { $(this).siblings(".reduce").removeClass("two").addClass("one"); $(this).siblings(".reduce").attr("disabled","disabled"); } else { $(this).siblings(".reduce").removeClass("one").addClass("two"); } })//根据数量是否为1,改变减号的样式 } // 加 $(".sc-mid-list .add").click(function(){ var input = $(this).siblings(".count"); var obj = $(this).parents(".d4"); var per = parseFloat(obj.siblings(".d3").find(".per").text());//获取当前一行的单价 var num = ''; var price = ''; input.attr("value", parseInt(input.attr("value")) + 1 );//数量加1 num = input.attr("value"); price = num*per;// obj.siblings(".d5").find(".cart-price").text(price); count(); totalMoney(); }) // 减 $(".sc-mid-list .reduce").click(function(){ var input = $(this).siblings(".count"); var obj = $(this).parents(".d4"); var per = parseFloat(obj.siblings(".d3").find(".per").text());//获取当前一行的单价 var num = ''; var price = ''; var Val = parseInt(input.attr("value")); if(Val <= 1){ Val = 2; } input.attr("value", parseInt(Val) - 1 );//数量减1 num = input.attr("value"); price = num*per;// obj.siblings(".d5").find(".cart-price").text(price); count(); }) }) </script>
jquery模仿淘宝悬挂购物车物品结算功能-附源码下载
查看演示 源码下载
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 黄乙玲1988-无稳定的爱心肝乱糟糟[日本东芝1M版][WAV+CUE]
- 群星《我们的歌第六季 第3期》[320K/MP3][70.68MB]
- 群星《我们的歌第六季 第3期》[FLAC/分轨][369.48MB]
- 群星《燃!沙排少女 影视原声带》[320K/MP3][175.61MB]
- 乱斗海盗瞎6胜卡组推荐一览 深暗领域乱斗海盗瞎卡组分享
- 炉石传说乱斗6胜卡组分享一览 深暗领域乱斗6胜卡组代码推荐
- 炉石传说乱斗本周卡组合集 乱斗模式卡组最新推荐
- 佟妍.2015-七窍玲珑心【万马旦】【WAV+CUE】
- 叶振棠陈晓慧.1986-龙的心·俘虏你(2006复黑限量版)【永恒】【WAV+CUE】
- 陈慧琳.1998-爱我不爱(国)【福茂】【WAV+CUE】
- 咪咕快游豪礼放送,百元京东卡、海量欢乐豆就在咪咕咪粉节!
- 双11百吋大屏焕新“热”,海信AI画质电视成最大赢家
- 海信电视E8N Ultra:真正的百吋,不止是大!
- 曾庆瑜1990-曾庆瑜历年精选[派森][WAV+CUE]
- 叶玉卿1999-深情之选[飞图][WAV+CUE]