基于jQuery模拟实现淘宝购物车模块

这是网页版淘宝中购物车的页面

基于jQuery模拟实现淘宝购物车模块_第1张图片

注意给checkbox添加事件就是用change()

给button添加事件就是用click()

1、每次点击+号,根据文本框的值乘以当前商品的价格就是商品的小计

2、只能增加本商品的小计,就是当前商品的小计模块

3、修改普通元素的内容是text方法

4、当前商品的价格要把¥符号去掉再相乘 截取字符串substr()

5、parents(‘选择器’)可以返回指定祖先元素4

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

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

8、用最新的表单内容的值乘以单价即可,但还是当前商品的小计

基于jQuery模拟实现淘宝购物车模块_第2张图片

计算总计和总额:

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

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

点击+号或者-号,都会改变总计和总额,如果用户修改了文本框里面的值也会改变总额,那么都要分别添加到这三个事件中,因此封装一个函数来求总额和总计,以上几个操作调用即可

注意:总计是文本框中的值相加val()。总额是普通元素的内容text()

注意普通元素里面的内容要去掉¥并且转为数字型后才能相加

基于jQuery模拟实现淘宝购物车模块_第3张图片



 

    
    
    
    Document
    
    

 

    
全部商品
全选 商品 单价 数量 小计 操作
¥37.00 ¥37.00 删除
¥49.90 ¥49.90 删除
¥69.90 ¥69.90 删除
¥23.70 ¥23.70 删除
全选已经选0件商品总价: ¥12.60

到此这篇关于基于jQuery模拟实现淘宝购物车模块的文章就介绍到这了,更多相关jQuery淘宝购物车内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(基于jQuery模拟实现淘宝购物车模块)