购物车案例模块（全选，增减商品数量，修改商品小计，计算总计和面额，删除商品，选中商品添加背景）

一、全选按钮分析：

里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。
因为checked是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
把全选按钮状态赋值给3小复选框就可以了。
当我们每次点击小的复选框按钮，就来判断：
如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
:checked选择器 :checked 查找被选中的表单元素。
代码

// 1. 全选功能模块 ： // 点击全选复选框 选中 其他的小复选按钮也选中 反之则不选中$(".checkall").click(function () {// $(this).prop("checked");$(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));});// 点击小的复选框 如果选中的个数等于小复选框的 length 就把全选按钮选上 否则全选按钮不选// :checked 选择器 查找被选中的表单元素$(".j-checkbox").click(function () {// console.log($(".j-checkbox:checked"));if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {$(".checkall").prop("checked", $(this).prop("checked"));} else {$(".checkall").prop("checked", "");}});

二、增减商品数量分析：

核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
注意1：只能增加本商品的数量，就是当前+号的兄弟文本框（itxt）的值。
修改表单的值是val() 方法
注意2：这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值
减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。
代码

// 2. 增减商品数量模块：// 核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。// 注意1： 只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。 // 修改表单的值是val() 方法// 注意2： 这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值// 减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。$(".increment").click(function () {// 点击+号实现文本框数量+1var n = $(this).siblings(".itxt").val();n++;// val() 修改值不加引号如果是数字的话$(this).siblings(".itxt").val(n);// console.log($(this).siblings(".itxt").val());var p = $(this).parents(".p-num").siblings(".p-price").text().substr(1);// console.log($(this).parents(".p-num").siblings(".p-price").text().substr(1));$(this).parents(".p-num").siblings(".p-sum").text("￥" + (n * p).toFixed(2));getNum();});$(".decrement").click(function () {// 点击-号实现文本框数量-1var n = $(this).siblings(".itxt").val();if (n == 1) {return n;} else {n--;// val() 修改值不加引号如果是数字的话$(this).siblings(".itxt").val(n);// console.log($(this).siblings(".itxt").val());}var p = $(this).parents(".p-num").siblings(".p-price").text().substr(1);// console.log($(this).parents(".p-num").siblings(".p-price").text().substr(1));$(this).parents(".p-num").siblings(".p-sum").text("￥" + (n * p).toFixed(2));getNum();});

三、修改商品小计分析：

核心思路：每次点击+号或者-号，根据文本框的值乘以当前商品的价格就是商品的小计
注意1：只能增加本商品的小计，就是当前商品的小计模块（p-sum）
修改普通元素的内容是text() 方法
注意2：当前商品的价格，要把￥符号去掉再相乘截取字符串 substr(1)
parents(‘选择器’) 可以返回指定祖先元素
最后计算的结果如果想要保留2位小数通过 toFixed(2) 方法
用户也可以直接修改表单里面的值，同样要计算小计。用表单change事件
用最新的表单内的值乘以单价即可但是还是当前商品小计
代码

// 2. 增减商品数量模块：// 核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。// 注意1： 只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。 // 修改表单的值是val() 方法// 注意2： 这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值// 减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。$(".increment").click(function () {// 点击+号实现文本框数量+1var n = $(this).siblings(".itxt").val();n++;// val() 修改值不加引号如果是数字的话$(this).siblings(".itxt").val(n);// console.log($(this).siblings(".itxt").val());var p = $(this).parents(".p-num").siblings(".p-price").text().substr(1);// console.log($(this).parents(".p-num").siblings(".p-price").text().substr(1));$(this).parents(".p-num").siblings(".p-sum").text("￥" + (n * p).toFixed(2));getNum();});$(".decrement").click(function () {// 点击-号实现文本框数量-1var n = $(this).siblings(".itxt").val();if (n == 1) {return n;} else {n--;// val() 修改值不加引号如果是数字的话$(this).siblings(".itxt").val(n);// console.log($(this).siblings(".itxt").val());}var p = $(this).parents(".p-num").siblings(".p-price").text().substr(1);// console.log($(this).parents(".p-num").siblings(".p-price").text().substr(1));$(this).parents(".p-num").siblings(".p-sum").text("￥" + (n * p).toFixed(2));getNum();});

四、计算总计和面额

核心思路：把所有文本框里面的值相加就是总计数量。总额同理
文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可
点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额
因此可以封装一个函数求总计和总额的，以上2个操作调用这个函数即可。
注意1：总计是文本框里面的值相加用 val() 总额是普通元素的内容用text()
要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加
代码

$(".itxt").change(function () {var n = $(this).val();var p = $(this).parents(".p-num").siblings(".p-price").text().substr(1);$(this).parents(".p-num").siblings(".p-sum").text("￥" + (n * p).toFixed(2));});// 4.计算总数量和总价格模块：// 点击+ - 号 会改变总计和总价 如果用户修改了文本框的值同样会改变总数量和总价格 getNum();function getNum() {var count = 0;var money = 0;$(".itxt").each(function (i, ele) {count += parseInt($(ele).val());});$(".amount-sum em").text(count);$(".p-sum").each(function (i, ele) {money += parseFloat($(ele).text().substr(1));})$(".price-sum em").text("￥" + money.toFixed(2));}

五、删除商品分析：

核心思路：把商品remove() 删除元素即可
有三个地方需要删除： 1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车
商品后面的删除按钮：一定是删除当前的商品，所以从 $(this) 出发
删除选中的商品：先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品
清理购物车：则是把所有的商品全部删掉

 // 6. 删除商品模块// (1) 商品后面的删除按钮$(".p-action a").click(function () {// 删除的是当前的商品 $(this).parents(".cart-item").remove();getNum();});// (2) 删除选中的商品$(".remove-batch").click(function () {// 删除的是小的复选框选中的商品$(".j-checkbox:checked").parents(".cart-item").remove();getNum();});// (3) 清空购物车 删除全部商品$(".clear-all").click(function () {$(".cart-item").remove();getNum();})

购物车案例模块（全选，增减商品数量，修改商品小计，计算总计和面额，删除商品，选中商品添加背景）相关推荐

jQuery 属性操作——案例：购物车案例模块
案例:购物车案例模块-全选 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset= ...
j2ee:servlet练习鲜花项目(购物车、分页、ajax、iframe弹出层、jquery、json(计算小计、总计)、map集合高级遍历、图片上传)...
第一:概念购物车全过程的理解: 1.新建一个购物车类,这样,这个类里面就可以封装商品对象和商品数量了. 2.每种商品都是一个购物车 3.把所有的购物车放在一起,也就是放在一个map集合中,这样 ...
jQuery 内容文本值|| 案例：购物车案例模块-增减商品数量 || 案例：购物车案例模块-修改商品小计
jQuery 内容文本值 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
uniapp中购物车demo（全选反选、计算总价、改变商品数量）
复选框checkbox插件下载地址这个插件可以使用Vue中的双向绑定,方便(给购物车列表中的数据添加双向绑定的属性即可) HTML <template><view class=&q ...
原生js做购物车全选选中商品显示价格和小计的计算
html代码 <div class="contain"><table class="table table-bordered">< ...
android购物车简单实现全选+加减器+总价格
//Activity主頁面佈局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
DOM操作案例之--全选与反选
全选与反选在表单类的项目中还是很常见的,电商项目中的购物车一定少不了这个功能. 下面我只就用一个简单的案例做个演示吧. <div class="wrap"><ta ...
jQuery实现购物车功能（小计、总计）
html <html> <body><form class="buyCar"><!-- 购物车上部 ...
linux系统模块全选快捷键,Linux的150个命令和快捷键整理
线上查询及帮助命令(1个) man 目录操作命令(6个) ls.tree.pwd.mkdir.rmdir.cd 文件操作命令(7个) touch.cp.mv.rm.ln.find.rename 文件查 ...

购物车案例模块（全选，增减商品数量，修改商品小计，计算总计和面额，删除商品，选中商品添加背景）

购物车案例模块（全选，增减商品数量，修改商品小计，计算总计和面额，删除商品，选中商品添加背景）相关推荐

最新文章

热门文章