购物车功能
程序员文章站
2024-03-20 14:32:58
...
购物车功能
HTML
<!-- 商品详细模块 -->
<div class="cart-item-list">
<div class="cart-item check-cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" checked class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p1.jpg" alt="">
</div>
<div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
</div>
<div class="p-price">￥12.60</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥12.60</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p2.jpg" alt="">
</div>
<div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
</div>
<div class="p-price">￥24.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥24.80</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p3.jpg" alt="">
</div>
<div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
</div>
<div class="p-price">￥29.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥29.80</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
</div>
<!-- 结算模块 -->
<div class="cart-floatbar">
<div class="select-all">
<input type="checkbox" name="" id="" class="checkall">全选
</div>
<div class="operation">
<a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
<a href="javascript:;" class="clear-all">清理购物车</a>
</div>
<div class="toolbar-right">
<div class="amount-sum">已经选<em>1</em>件商品</div>
<div class="price-sum">总价： <em>￥12.60</em></div>
<div class="btn-area">去结算</div>
</div>
</div>
JS
$(function(){
getSum();
$('.checkall').change(function(){
//如果全选按钮选中，三个小按钮都要被选中
// console.log($(this).prop('checked'));
$('.j-checkbox,.checkall').prop('checked',$(this).prop('checked'));
//选中添加背景
if($(this).prop('checked')){
$('.cart-item').addClass('check-cart-item');
}else{
$('.cart-item').removeClass('check-cart-item');
}
//如果三个小按钮被选中，全选按钮就要被选中
$('.j-checkbox').change(function(){
if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
});
});
//复选框变化，给商品添加删除背景
$('.j-checkbox').change(function(){
if($(this).prop('checked')){
$(this).parents('.cart-item').addClass('check-cart-item');
}else{
$(this).parents('.cart-item').removeClass('check-cart-item');
}
});
//增减商品数量模块，首先声明一个变量，当点击加减号时，变量++，并赋值给文本框
$('.increment').click(function(){
var num = $(this).siblings('.itxt').val();
num++;
$(this).siblings('.itxt').val(num);
//修改商品总价格 根据文本框的值乘以当前商品的价格就是商品小计
//商品价格
// var p = $(this).parent().parent().siblings('.p-price').html();
var p = $(this).parents('.p-num').siblings('.p-price').html();
p = p.substr(1);
// console.log(p);
//取两位小数
var price = (p * num).toFixed(2);
//小计
// $(this).parent().parent().siblings('.p-sum').html("￥" + p * num);
$(this).parents('.p-num').siblings('.p-sum').html("￥" + price);
getSum();
});
$('.decrement').click(function(){
var num = $(this).siblings('.itxt').val();
if(num == 1){
return false;
}else{
num--;
}
$(this).siblings('.itxt').val(num);
//var p = $(this).parent().parent().siblings('.p-price').html();
var p = $(this).parents('.p-num').siblings('.p-price').html();
p = p.substr(1);
// console.log(p);
//取两位小数
var price = (p * num).toFixed(2);
//小计
// $(this).parent().parent().siblings('.p-sum').html("￥" + p * num);
$(this).parents('.p-num').siblings('.p-sum').html("￥" + price);
getSum();
});
//直接修改数量
$('.itxt').change(function(){
var num = $(this).val();
var p = $(this).parents('.p-num').siblings('.p-price').html();
p = p.substr(1);
var price = (p * num).toFixed(2);
$(this).parents('.p-num').siblings('.p-sum').html('￥' + price);
getSum();
});
//计算总计和总额模块
function getSum(){
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));
}
// 6. 删除商品模块
// (1) 商品后面的删除按钮
$(".p-action a").click(function() {
// 删除的是当前的商品
$(this).parents(".cart-item").remove();
getSum();
});
// (2) 删除选中的商品
$(".remove-batch").click(function() {
// 删除的是小的复选框选中的商品
$(".j-checkbox:checked").parents(".cart-item").remove();
getSum();
});
// (3) 清空购物车 删除全部商品
$(".clear-all").click(function() {
$(".cart-item").remove();
getSum();
});
});