购物车案例(jQuery版)

432 阅读3分钟

首先以下代码的html和css我有做省略

如果要问为什么那就是我很懒

接下来就是我对script的梳理:

大略分以下是包括了六个部分:全选、增减商品、修改商品小计、计算总计和总额、删除商品、选中商品添加背景颜色。

全选

1.里面3个小的复选框(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走

2.因为checked是复选框的固有属性,此时我们需要利用prop()方法获取和设置属性

3.把全选按钮状态赋值给3个小复选框就可以了

4.当我们每次点击小的复选框按钮,就来判断

5.如果小复选框被选中的个数等于3就应该把全选按钮选上,否则全选按钮不选

6.:checked选择器 :checked查找被选中的表单元素

全选.png

复选框.png

增减商品

1.核心思路:首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋值给文本框

2.注意:只能加本商品的数量,就是当前+号的兄弟文本框(itxt)的值

3.修改表单的值是val()方法

4.注意:这个变量初始值应该是这个文本框的值,在这个值的基础上++.要获取表单的值

5.减号同理,但是值得大于1

小计.png

修改商品小计

1.核心思路:每次点击+号或-号,根据文本框的值乘以当前商品的价格就是商品的小计

2.注意:只能增加本商品的小计,就是当前商品的小计模块(p-sum)

3.修改普通元素的内容是text()方法

4.注意:当前商品的价格,要把¥符号去掉在相乘截取字符串substr(1)

5.parents('选择器')可以返回指定祖先元素

6.最后计算的结果如果想要保留两位小数 通过toFixed(2)方法

7.用户也可以直接修改表单里面的值,同样要计算小计。用表单change事件

8.用最新的表单的值乘以单价即可

修改小计.png

计算总计和总额

1.核心思路:把所有文本框里面的值相加就是总计数量。总额同理

2.文本框里面的值不相同,如果想要相加需要用到each遍历。声明一个变量,相加即可

总额.png

每次增删商品、修改商品小计、删除商品和页面刚开始时都要使用这个这个函数计算总额和总数

删除商品

1.核心思路:把商品remove()删除元素即可

2.有三个地方需要删除:1.商品后面的删除按钮2.删除选中的商品3.清理购物车

3.商品后面的删除按钮:一定是删除当前的商品,所以从$(this)出发

删除1.png

4.删除选中的商品:先判断小的复选框按钮是否选中状态,如果选中,则删除对应商品

删除2.png

5.清空购物车 删除全部商品

删除3.png

*选中商品添加背景颜色

1.核心思路:选中的商品添加背景颜色,不选中的移除背景即可

2.全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景

3.小的复选框点击:如果是选中状态,则当前商品添加背景,否则移除背景

背景全选.png

背景复选.png