明霞山资源网 Design By www.htccd.com
这篇文章里，将会提到购物车里的所有功能。包括全选、单选金额改变。在增加数量时金额也会相应改变。
效果图展示：
说下大致的思路吧：
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.htccd.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。