jQuery实现PC端商城购物车模块基本功能
先上效果图：
因为主要是想练习jQuery的使用，所以页面CSS部分比较简陋，有需要的话，大家在参考代码时，可以自己再完善下CSS部分的代码，让购物车页面更加美观。
功能清单如下：
1.全选非全选商品
2.一键删除选中商品
3.一键清空购物车
4.根据添加和删除动态计算已选中的商品总数和总价格，并渲染到页面中
5.点击加减单个商品的数量，键盘输入改变单个商品的数量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车商品数量增减</title>
<style type="text/css">
a {
text-decoration: none;
}
.itxt {
width: 50px;
text-align: center;
}
.clearfix {
content: "";
visibility: none;
display: block;
clear: both;
}
.goods {
box-sizing: border-box;
/* width: 700px; */
height: 100px;
border: 1px solid black;
padding: 25px;
}
.g_name {
width: 10%;
float: left;
}
.left,
.right,
.number {
float: left;
}
.left {
width: 20%;
white-space: nowrap;
}
.number {
width: 30%;
text-align: center;
}
.right {
width: 30%;
white-space: nowrap;
text-align: left;
}
.delete {
text-align: right;
display: inline-block;
width: 70px;
}
.goods_check {
float: left;
height: 20px;
}
.check_cart_item {
background-color: #fff4e8;
}
</style>
<script src="js/jquery-3.5.0.js"></script>
<script type="text/javascript">
$(function() {
console.log($('.price'));
$('.decrease').click(function() {
// 1.点击减号，input框中的数值也要进行递减，但要保证input框中的数值 >= 0
var curVal = $(this).siblings('.itxt').val();
if (curVal >= 2) {
curVal -= 1;
$(this).siblings('.itxt').val(curVal);
}
// 2.获取当前商品的单价，和数量，相乘得到商品小计的数值（需要截取字符串，去掉单价里的$符号，并且最终计算得到的商品小计需要保留两位小数，并把计算结果更新到页面的小计中），
var price = $(this).parent().siblings('.left').children('.price').html();
price = price.substr(1); // 单价
var sum = "￥" + (curVal * price).toFixed(2); // 小计
$(this).parent().siblings('.right').children('.sum').html(sum);
getSum();
})
$('.increase').click(function() {
// 只能获取当前点击元素的兄弟元素的文本框的值
var curVal = $(this).siblings('.itxt').val();
curVal = parseInt(curVal);
curVal += 1;
// 只能改变当前点击元素的兄弟元素的文本框的值，不能改变其他商品的文本框的值
$(this).siblings('.itxt').val(curVal);
var price = $(this).parent().siblings('.left').children('.price').html();
price = price.substr(1); // 单价从第一位截取，来去掉$符号
var sum = (curVal * price).toFixed(2); // 小计保留两位小数
sum = "￥" + sum;
$(this).parent().siblings('.right').children('.sum').html(sum);
getSum();
})
// 3.用户修改文本框的数值,商品小计数值也要更新
$('.itxt').change(function() {
var price = $(this).parent().siblings('.left').children('.price').html();
price = price.substr(1); // 单价从第一位截取，来去掉$符号
var sum = $(this).val() * price;
sum = "￥" + sum.toFixed(2);
$(this).parent().siblings('.right').children('.sum').html(sum);
getSum();
})
renew(); // 页面加载完成后调用renew()函数，把每个商品的单价的数值赋值给这个商品的小计
// renew()函数必须在getSum()函数之前，不然商品总价会是0.00
getSum(); //没有在input中修改值或者没有点击加减数量时，也要调用这个函数来将商品总数量和商品总价进行更新
// 4. 计算总计总额模块
function getSum() {
var count = 0; //总件数
var money = 0; //总金额
$('.itxt').each(function(i, ele) {
count += parseInt($(ele).val());
})
$('.sumNum em').html(count);
$('.sum').each(function(i, ele) {
money += parseFloat($(ele).html().substr(1));
// console.log(money.toFixed(2))
// console.log($(ele).html())
})
// console.log(money.toFixed(2))
$('.sumPrice em').html(money.toFixed(2));
}
// 页面加载完成后调用renew()函数，把每个商品的单价的数值赋值给这个商品的小计
function renew() {
var array_price = [];
// console.log($('.goods').length);
for (var i = 0; i < $('.goods').length; i++) {
console.log(parseFloat($('.price')[i].innerHTML.substr(1)).toFixed(2));
// array_price.push($('.price')[i].innerHTML);
array_price.push(parseFloat($('.price')[i].innerHTML.substr(1)).toFixed(2));
}
console.log(array_price);
$('.sum').each(function(i, ele) {
$(ele).html('￥' + array_price[i]);
})
}
// 5.删除商品模块
// 1)每个商品后面的删除功能
$('.delete').click(function() {
$(this).parents('.goods').remove();
getSum();
})
// 2)点击删除选中的商品功能
$('.removes').click(function() {
$('.goods_check:checked').parents('.goods').remove();
getSum();
})
// 3)点击清空购物车
$('.remove_cart').click(function() {
$('.goods').remove();
getSum();
})
// 全选 非全选按钮
$('.checkAll').change(function() {
$('.goods_check,.checkAll').prop("checked", $(this).prop("checked")) // 将全选按钮1的 checked的值赋给goods按钮和另一个全选按钮2
// console.log()
if($('.goods_check,.checkAll').prop("checked")) {
$('.goods').addClass('check_cart_item');
}else {
$('.goods').removeClass('check_cart_item');
}
})
$('.goods_check').change(function() {
if($(this).prop('checked')){
$(this).parents('.goods').addClass('check_cart_item');
}else {
$(this).parents('.goods').removeClass('check_cart_item');
}
// :checked选择器可以帮我们自动获取已勾选的按钮,通过length属性可以获取已勾选按钮的数量 将其 与按钮的总数进行对比 来判断是否所有商品按钮都已经被勾选
if ($(".goods_check:checked").length === $('.goods_check').length) {
$('.checkAll').prop("checked", true)
} else {
$('.checkAll').prop("checked", false)
}
})
})
</script>
</head>
<body>
全选<input type="checkbox" name="" id="" value="全选1" class="checkAll" />
<div class="goods clearfix">
<input type="checkbox" name="" id="" value="商品1" class="goods_check" />
<span class="g_name">商品1</span>
<div class="left">
<span>单价:</span>
<span class="price">￥12.6</span>
</div>
<div class="number">
<a href="#" class="decrease">-</a>
<input type="text" value="1" class="itxt" />
<a href="#" class="increase">+</a>
</div>
<div class="right">
<span>小计:</span>
<span class="sum">￥0.00</span>
<span class="delete"><a href="#">删除</a></span>
</div>
</div>
<div class="goods clearfix">
<input type="checkbox" name="" id="" value="商品1" class="goods_check" />
<span class="g_name">商品2</span>
<div class="left">
<span>单价:</span>
<span class="price">￥102.9</span>
</div>
<div class="number">
<a href="#" class="decrease">-</a>
<input type="text" value="1" class="itxt" />
<a href="#" class="increase">+</a>
</div>
<div class="right">
<span>小计:</span>
<span class="sum">￥0.00</span>
<span class="delete"><a href="#">删除</a></span>
</div>
</div>
<div class="goods clearfix">
<input type="checkbox" name="" id="" value="商品1" class="goods_check" />
<span class="g_name">商品3</span>
<div class="left">
<span>单价:</span>
<span class="price">￥19.9</span>
</div>
<div class="number">
<a href="#" class="decrease">-</a>
<input type="text" value="1" class="itxt" />
<a href="#" class="increase">+</a>
</div>
<div class="right">
<span>小计:</span>
<span class="sum">￥0.00</span>
<span class="delete"><a href="#">删除</a></span>
</div>
</div>
<div class="goods clearfix">
<input type="checkbox" name="" id="" value="商品1" class="goods_check" />
<span class="g_name">商品4</span>
<div class="left">
<span>单价</span>
<span class="price">￥358.9</span>
</div>
<div class="number">
<a href="#" class="decrease">-</a>
<input type="text" value="1" class="itxt" />
<a href="#" class="increase">+</a>
</div>
<div class="right">
<span>小计:</span>
<span class="sum">￥0.00</span>
<span class="delete"><a href="#">删除</a></span>
</div>
</div>
<div class="bottom">
全选<input type="checkbox" name="" id="" value="全选1" class="checkAll" />
<span><a href="#" class="removes">删除选中的商品</a></span>
<span><a href="#" class="remove_cart">清空购物车</a></span>
<div class="sumNum">已经选中<em>1</em>件商品</div>
<div class="sumPrice">总计：<em>0.00</em>元</div>
</div>
</body>
</html>
2681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
