jquery购物车案例
实现功能：
购物车的商品全选、增减商品数量、修改商品小计、计算商品总额、删除商品、选中商品添加背景
1.购物车的商品全选、计算商品总额
2.全不选
3.增减商品数量、修改商品小计、选中商品添加背景
4.删除商品
删除后：
5.删除所选商品
删除后：
6.清空购物车
清空后：
代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>购物车功能</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="./cart.js"></script>
<!-- 引入初始化 -->
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #666;
}
body {
background: #fff;
color: #666;
font-size: 14px;
}
input {
outline: none;
}
.clearfix::before,
.clearfix::after {
content: '';
display: block;
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
<!-- 引入购物车样式 -->
<style>
table {
width: 800px;
margin: 0 auto;
border-collapse: collapse;
}
th {
font: normal 14px/50px '宋体';
color: #666;
}
th,
td {
border: none;
text-align: center;
border-bottom: 1px dashed #ccc;
}
input[type='checkbox'] {
width: 13px;
height: 13px;
}
tbody p {
position: relative;
bottom: 10px;
}
tbody .add,
tbody .reduce {
float: left;
width: 22px;
height: 22px;
border: 1px solid #ccc;
text-align: center;
background: none;
outline: none;
cursor: pointer;
}
tbody input[type='text'] {
width: 50px;
float: left;
height: 18px;
text-align: center;
}
tbody .count-c {
width: 98px;
margin: 0 auto;
}
button[disabled] {
color: #ddd;
cursor: not-allowed;
}
tbody tr:hover {
background: #eee;
}
tbody tr.active {
background: rgba(241, 209, 149, 0.945);
}
.controls {
width: 790px;
margin: 10px auto;
border: 1px solid #ccc;
line-height: 50px;
padding-left: 10px;
position: relative;
}
.controls .del-all,
.controls .clear {
float: left;
margin-right: 50px;
}
.controls p {
float: right;
margin-right: 100px;
}
.controls span {
color: red;
}
.controls .pay {
position: absolute;
right: 0;
width: 80px;
height: 54px;
background: red;
font: bold 20px/54px '宋体';
color: #fff;
text-align: center;
bottom: -1px;
}
.controls .total-price {
font-weight: bold;
}
</style>
</head>
<body>
<div class="car">
<table>
<thead>
<tr>
<th><input type="checkbox" id="all" />全选</th>
<th>商品</th>
<th>单价</th>
<th>商品数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="carBody">
<tr>
<td>
<input class="s_ck" type="checkbox" readonly />
</td>
<td>
<img src="./images/01.jpg" />
<p>牛奶</p>
</td>
<td class="price">5￥</td>
<td>
<div class="count-c clearfix">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">5￥</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input class="s_ck" type="checkbox" />
</td>
<td>
<img src="./images/01.jpg" />
<p>牛奶</p>
</td>
<td class="price">10￥</td>
<td>
<div class="count-c clearfix">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">20￥</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input class="s_ck" type="checkbox" />
</td>
<td>
<img src="./images/01.jpg" />
<p>牛奶</p>
</td>
<td class="price">20￥</td>
<td>
<div class="count-c clearfix">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">40￥</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input class="s_ck" type="checkbox" />
</td>
<td>
<img src="./images/01.jpg" />
<p>牛奶</p>
</td>
<td class="price">35￥</td>
<td>
<div class="count-c clearfix">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">70￥</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
</tbody>
</table>
<div class="controls clearfix">
<a href="javascript:" class="del-all">删除所选商品</a>
<a href="javascript:" class="clear">清理购物车</a>
<a href="javascript:" class="pay">去结算</a>
<p>
已经选中<span id="totalCount">0</span>件商品;总价：<span id="totalPrice" class="total-price">0￥</span>
</p>
</div>
</div>
</body>
</html>
js代码
$(function(){
calc()
function calc() {
var checked_num = 0
var total_money = 0
//计算每件商品小计 单价*数量（保留两位小数）
$('.total').map((i, k) => {
$(k).text(parseInt(($(k).prev().prev().text().replace('￥', '')) * $(k).prev().find('input').val()).toFixed(
2))
})
$('.s_ck').map((i, k) => {
if ($(k).prop('checked') == true) {
checked_num++
var parent = $(k).parent().parent()
total_money += parent.find('.total').text() - 0
}
})
//商品选中数量
$('#totalCount').text(checked_num)
//计算合计
$('#totalPrice').text(total_money.toFixed(2))
}
//商品数量加减(最小值为1，最大值为999)
$('.count-c').map((i, k) => {
// 数量减
$(k).find('button').eq(0).click(function () {
var num = parseInt($(this).next().val());
num--;
num = num < 1 ? 1 : num;
if(num===1) {
$(this).attr("disabled",true)
}
$(this).next().val(num);
calc();
})
// 数量加
$(k).find('button').eq(1).click(function () {
var num2 = parseInt($(this).prev().val());
num2++;
num2 = num2 > 999 ? 999 : num2;
$(k).find('button').eq(0).removeAttr("disabled")
$(this).prev().val(num2);
calc();
})
// 手动输入(这里可根据需要对输入的内容做正则验证)
$(k).find('input').blur(function () {
var num3 = parseInt($(this).val());
num3 = num3 > 999 ? 999 : (num3 < 1 ? 1 : num3);
$(this).val(num3);
calc();
})
})
// 全选
$("#all").click(function () {
console.log($(this).prop('checked'))
if ($(this).prop('checked') == true) {
$(".s_ck").prop("checked", true).parent().parent().css("background","#eee");
$('#all').prop('checked',true);
} else {
$(".s_ck").prop("checked",false).parent().parent().removeAttr("style");
$('#all').prop('checked',false);
}
calc();
});
// 删除
$('.del').click(function(){
$(this).parent().parent().remove();
calc();
})
// 清空购物车
$('.clear').click(function(){
$('#carBody').children().remove();
calc();
})
$('.s_ck').click(function(){
if($(this).prop("checked")==true){
$(this).parent().parent().css("background","#eee");
for(let i=$('.s_ck').length-1;i>=0;i--){
if($('.s_ck').eq(i).prop("checked")!==true){
continue;
}
$('#all').eq(i).prop('checked',true);
}
}else{
$(this).parent().parent().removeAttr("style");
$('#all').prop('checked',false);
}
calc();
})
// 删除所选
$('.del-all').click(function(){
for(let i=$('.s_ck').length;i>=0;i--){
if($('.s_ck').eq(i).prop("checked")==true){
$('.s_ck').eq(i).parent().parent().empty();
}
}
calc();
})
});