今天成功解锁购物车,想要更多可能就往下看吧!!
今天是一些购物车的基本功能实现,全选、增减商品数量、修改商品小计、计算总计和总和、删除商品、选中添加背景颜色等一些常见功能。
html结构的全部代码都在文末了,懂的都懂啊!!!
一、全选
全选分析:
⭐ 全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走。
⭐ 因为checked 是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。
⭐ 把全选按钮状态赋值给3小复选框就可以了。
⭐ 当我们每次点击小的复选框按钮,就来判断:
⭐ 如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。
⭐ :checked 选择器 :checked 查找被选中的表单元素。
以上是我们要实现的一个基本功能展示,接下来进入案例中来写一写。
// 全选
$(".checkall").change(function () {
$(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"))
});
$(".j-checkbox").change(function () {
if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
});
二、增减商品数量
增减商品数量分析:
⭐ 核心思路:首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋值给文本框。
⭐ 注意1: 只能增加本商品的数量, 就是当前+号的兄弟文本框(itxt)的值。
⭐ 修改表单的值是val() 方法
⭐ 注意2: 这个变量初始值应该是这个文本框的值,在这个值的基础上++。要获取表单的值
⭐ 减号(decrement)思路同理,但是如果文本框的值是1,就不能再减了。
点击加号数量增加,点击减少数量减少这是一个基本的加减功能的实现,最少大于等于一件商品!!
给加号和减号分别一个点击事件,然后再获取表单里面的值,用一个变量来自增自减来改变里面的值。
// 数量 加
$(".increment").click(function () {
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
})
// 数量 减
$(".decrement").click(function () {
var n = $(this).siblings(".itxt").val();
if (n == 1) {
return false;
}
n--;
$(this).siblings(".itxt").val(n);
});
三、修改商品小计
修改商品小计分析:
⭐ 核心思路:每次点击+号或者-号,根据文本框的值 乘以 当前商品的价格 就是 商品的小计
⭐ 注意1: 只能增加本商品的小计, 就是当前商品的小计模块(p-sum)
⭐ 修改普通元素的内容是text() 方法
⭐ 注意2: 当前商品的价格,要把¥符号去掉再相乘 截取字符串 substr(1)
⭐ parents(‘选择器’) 可以返回指定祖先元素
⭐ 最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法
⭐ 用户也可以直接修改表单里面的值,同样要计算小计。 用表单change事件
⭐ 用最新的表单内的值 乘以 单价即可 但是还是当前商品小计