最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery模拟淘宝购物车功能
时间:2022-06-25 17:09:27 编辑:袖梨 来源:一聚教程网
首先我们要实现的内容的需求有如下几点:
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(); }); } |
相关文章
- 《无限暖暖》天星之羽获得位置介绍 12-20
- 《流放之路2》重铸台解锁方法介绍 12-20
- 《无限暖暖》瞄准那个亮亮的成就怎么做 12-20
- 《无限暖暖》魔气怪终结者完成方法 12-20
- 《无限暖暖》曙光毛团获得位置介绍 12-20
- 《无限暖暖》日光果获得位置介绍 12-20