jQuery模拟淘宝购物车功能
首先我们要实现的内容的需求有如下几点：
1.在购物车页面中，当选中“全选”复选框时，所有商品前的复选框被选中，否则所有商品的复选框取消选中。
2.当所有商品前的复选框选中时，“全选”复选框被选中，否则“全选”复选框取消选中。
3.单击图标-的时候数量减一而且不能让物品小于0并且商品总价与积分随之改变。
4.单击图标+的时候数量增加并且商品总价与积分随之改变。
5.单击删除所选将删除用户选中商品，单击删除则删除该商品即可并达到商品总价与积分随之改变。
下面我们就开始进入代码:
$(function(){
subtotal();
addorminus();
allcheckbox();
delet();
deleselect();
});
//设置获取积分和一共金额函数
functioncountmoney(){
varmoney=0;//总金额
varjifen=0;//总积分
$(".cart_td_7").each(function(){
varm=$(this).text();
money+=Number(m);
varj=$(this).siblings(".cart_td_4").text();
varnumber=$(this).siblings(".cart_td_6").children("input").val();
jifen+=Number(j*number);
});
$("#total").html(money);
$("#integral").html(jifen);
}
//小计
functionsubtotal(){
varobj=$(".cart_td_7");
obj.each(function(){//each遍历每一个clss为.card_td_7的元素
varnum=$(this).siblings(".cart_td_6").children("input").val();//购物车选中的当前数量
varprice=$(this).siblings(".cart_td_5").html();//当前选中物品的price
varmoney=num*price;//小计
$(this).html(money);
});
countmoney();
}
//添加或减少数量
functionaddorminus(){
$(".hand").on("click",function(){
varnum;
if($(this).attr("alt")=="minus"){
num=$(this).next().val();
if(num==1){
$(this).css("display","none");
}else{
$(this).next().val(--num);
}
}else{
num=$(this).prev().val();
$(this).prev().val(++num);
if(num==1){
$(this).siblings("[alt==minus]").css("display","visible");
}else{}
}
subtotal();
});
}
//全选或者全不选
functionallcheckbox(){
$("#allCheckBox").live("change",function(){
if($(this).attr("checked")=="checked"){
$("[name=cartCheckBox]").attr("checked","checked");
}else{
$("[name=cartCheckBox]").attr("checked",false);
}
});
$("[name=cartCheckBox]").live("change",function(){
varbool=true;
$("[name=cartCheckBox]").each(function(){
if($(this).attr("cheked")!="checked"){
bool=false;
}
});
if(bool){
$("#allCheckBox").attr("checked","checked");
}else{
$("#allCheckBox").attr("checked",false);
}
});
}
//删除
functiondelet(){
$(".cart_td_8>a").live("click",function(){
$(this).parent().parent().prev().remove();
$(this).parent().parent().remove();
subtotal();
});
}
//删除所选
functiondeleselect(){
$("#deleteAll>img").live("click",function(){
$("[name=cartCheckBox]").each(function(){
if($(this).attr("checked")=="checked"){
$(this).parent().parent().prev().remove();
$(this).parent().parent().remove();
}
});
subtotal();
});
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！