这篇只要讲js部分的代码,html,css的部分不包括在内
首先我们要确认购物车有哪一些功能。上图:
1. 全选
2. 单选
3. 修改数量 ++ --
4. 直接在输入框输入数量
5. 修改小计金额
6. 修改总金额
7. 修改已选择的商品数量
8. 删除当前项
9. 清空购物车
10. 选中的商品高亮显示
全选功能: 我们在点击全选是将下面的checkbox 以及另外一个全选全部加上checked属性
$('.checkall').change(function(){
//ischecked用于保存修改后的全选框的checked属性true/false 并据此进行其他功能
var isChecked = $(this).prop('checked')
isChecked? $('.j-checkbox').prop('checked',true) :$('.j-checkbox').prop('checked',false)
// 所有的添加高亮 10. 选中的商品高亮显示
isChecked? $('.j-checkbox').parents('.cart-item').addClass('check-cart-item') : $('.j-checkbox').parents('.cart-item').removeClass('check-cart-item')
//另一个全新框也选中
isChecked? $('.checkall').prop('checked',true) :$('.checkall').prop('checked',false)
total()
})
单选功能: 在所有单选框都被选中时,全选框也要被选中
$('.j-checkbox').change(function(){
var checkedLength = $('.j-checkbox:checked').length
var allLength = $('.j-checkbox').length
checkedLength === allLength? $('.checkall').prop('checked',true) :$('.checkall').prop('checked',false)
// 10. 选中的商品高亮显示
$(this).prop('checked')? $(this).parents('.cart-item').addClass('check-cart-item'):$(this).parents('.cart-item').removeClass('check-cart-item')
total()
})
修改数量 ++ --功能:
$('.increment').click(function(){
var num = $(this).siblings('.itxt').val()
// 原值转为数字再加一
num = (num)*1 + 1
// 赋值
$(this).siblings('.itxt').val(num)
var dom = $(this)
rePrice(dom)
})
$('.decrement').click(function(){
var num = $(this).siblings('.itxt').val()
// 原值转为数字再减一
num = (num)*1 - 1
// 数值不能小于1
num>0?$(this).siblings('.itxt').val(num):alert('不能再减了')
// 赋值
var dom = $(this)
rePrice(dom)
})
直接在输入框输入数量:
$('.itxt').change(function(){
var ivalue = $(this).val()*1
console.log(ivalue)
// 判断是否为数字
if(isNaN(ivalue)){
alert('请输入数字')
$(this).val(1)
return
}
//判断是否大于0
if(ivalue <= 0){
$(this).val(1)
alert('请输入正数')
return
}
var dom = $(this)
rePrice(dom)
})
修改小计金额
function rePrice(dom) {
// 获取单价
var singlePrice = dom.parents('.cart-item').find('.p-price').text().substr(1)*1
// 获取数量
var num = dom.parents('.cart-item').find('.itxt').val()
//赋值 并保留两位小数
dom.parents('.cart-item').find('.p-sum').text('¥'+(singlePrice*num).toFixed(2))
total()
}
修改总金额 和. 修改已选择的商品数量: 根据被被选中的添加的属性 check-cart-item找到所有选中的 并进行遍历汇总所有的价格和数量,最后赋值。
function total() {
var totalPrice = 0
var totalNum = 0
//遍历每一个单价和数量
$('.check-cart-item').each(function(index,ele){
var price = $(ele).find('.p-sum').text().substr(1)*1
var num = $(ele).find('.itxt').val()*1
totalPrice += price
totalNum += num
})
$('.amount-sum em').text(totalNum)
$('.price-sum em').text(totalPrice.toFixed(2))
}
删除当前项:删除商品并添加一个删除的动画,重新计算总价
$('.p-action>a').click(function(){
$(this).parents('.cart-item').slideUp(300, function(){
$(this).remove();
total()
})
})
清空购物车
$('.clear-all').click(function(){
$('.cart-item').slideUp(300, function(){
$(this).remove()
total()
})
})