jQuery代码实现购物车效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<style>
table {
width: 600px;
}
td {
height: 50px;
text-align: center;
}
table,tr,td,th {
border: 1px solid #ccc;
}
a {
text-decoration: none;
}
.emptyCart{
display: none;
width: 600px;
height: 100px;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<!-- <button> <a href="javascript:alert('清除成功')">清除缓存</a></button> -->
<div class="emptyCart">
购物车空空的哦~，去看看心仪的商品吧~
去购物>
</div>
<table>
<thead>
<tr>
<th><input type="checkbox" name="" class="checkAll"></th>
<th>编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="chk"></td>
<td class="bianhao">1</td>
<td>小米手机</td>
<td>￥2.3</td>
<td>
<button class="decrement" data-index="1">-</button>
<input type="text" class='num' value="1" style="width:30px" readonly>
<button class="increment">+</button>
</td>
<td class="xiaoji">￥2.3</td>
<td > <a href="javascript:;" class="del">删除</a> </td>
</tr>
<tr>
<td><input type="checkbox" class="chk"></td>
<td class="bianhao">2</td>
<td>红米手机</td>
<td>￥1</td>
<td>
<button class="decrement" data-index="1">-</button>
<input type="text" class='num' value="4" style="width:30px">
<button class="increment">+</button>
</td>
<td class="xiaoji">￥4</td>
<td > <a href="javascript:;" class="del">删除</a> </td>
</tr>
<tr>
<td><input type="checkbox" class="chk"></td>
<td class="bianhao">3</td>
<td>大米手机</td>
<td>￥3</td>
<td>
<button class="decrement">-</button>
<input type="text" class='num' value="2" style="width:30px">
<button class="increment">+</button>
</td>
<td class="xiaoji">￥6</td>
<td > <a href="javascript:;" class="del">删除</a> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="checkbox" name="" class="checkAll"></td>
<td><a href="javascript:;" id="delSelect">删除选中的</a></td>
<td><a href="javascript:;" id="clearCart">清空购物车</a></td>
<td colspan="4">
总计：共<span id="totalNums"></span>件商品
总价： <span class="totalMoneys"></span>
</td>
</tr>
</tfoot>
</table>
<script>
// 7.打开页面，复选框被选中
$('input:checkbox').prop('checked',true);
// 判断value为1的 让减禁用
// $('.num').each(function(i,ele){
// if($(ele).val() == 1){
// $(this).prev().prop('disabled',true);
// $(this).prev().css('cursor','not-allowed');
// }else{
// $(this).prev().prop('disabled',false);
// $(this).prev().css('cursor','default');
// }
// });
// 判断value为1的 让减禁用
$('input[value=1]').prev().prop('disabled',true).css('cursor','not-allowed');
// $('input[value="1"]').prev().css('disabled',true);
// 改变总件，总价
function changeTotalNumAndTotalPrice(){
// 计算被选中的商品的总件，总价
var sum = 0;
var totalMoneys = 0;
$('.chk:checked').each(function(){
sum += $(this).parents('tr').find('.num').val()-0;
totalMoneys += $(this).parents('tr').find('.xiaoji').text().substr(1)-0;
});
$('#totalNums').text(sum);
$('.totalMoneys').text('￥'+ totalMoneys)
// console.log(sum);
// 1.遍历所有的数量 = 总件
// var sum = 0;
// $('.num').each(function(i,ele){
// sum += $(ele).val()-0;
// // console.log(i,$(ele).val()-0);
// });
// // 修改总件
// $('#totalNums').text(sum);
// // 2.遍历所有小计 = 总价
// var totalMoneys = 0;
// $('.xiaoji').each(function(i,ele){
// totalMoneys += $(ele).text().substr(1)-0;
// // console.log(i,$(ele).val()-0);
// });
// // 总价
// $('.totalMoneys').text('￥'+ totalMoneys)
}
// 刚刚打开页面
changeTotalNumAndTotalPrice();
// 重置序号函数
function resetNum(){
$('.bianhao').each(function(i,ele){
// console.log(i,ele);
$(this).text(i+1);
});
}
// 1.点击了购物车的全选按钮
$('.checkAll').change(function(){
$('.chk').prop('checked',$(this).prop('checked')); // 把全选的状态赋值给下面每个复选框
$('.checkAll').prop('checked',$(this).prop('checked'));// 另外一个checkAll根据当前checkAll的状态而改变
if($(this).prop('checked')){
changeTotalNumAndTotalPrice();
}else{
// 用户点击了取消全选 件数为0 总价 为0.00
$('#totalNums').text(0);
$('.totalMoneys').text('￥0.00');
}
})
// 2.点击了每个复选框，改变的全选 ,选中的长度 == 总长度 ，说明全选应该被选中了
$('.chk').change(function () {
// console.log($('.chk').length); // 总长度
// console.log($('.chk:checked').length); // 被选中的长度
if($('.chk').length == $('.chk:checked').length){
$('.checkAll').prop('checked',true); // 说明全选应该被选中了
}else{
$('.checkAll').prop('checked',false); // 说明全选应该被取消了
}
changeTotalNumAndTotalPrice();
})
// 3.商品数量改变
// 3.1 加
$('.increment').click(function(){
$(this).parents('tr').find('.chk').prop('checked',true);
$(this).prevAll('.decrement').prop('disabled',false);
$(this).prevAll('.decrement').css('cursor','default');
// 1.数量+1 获取数量 + 1 ,修改数量
var num = $(this).prev().val()-0;
num++;
$(this).prev().val(num);
// 2.小计改变 小计 = 数量 * 价格 ,赋值给小计
var price = $(this).parent().prev().text().substr(1)-0; // 截取 substr(1)
var totalPrice = num * price;
$(this).parent().next().text('￥'+totalPrice.toFixed(2));
// 3.改变总件
// 4.改变总价
changeTotalNumAndTotalPrice();
// console.log($(this));
if($('.chk').length == $('.chk:checked').length){
$('.checkAll').prop('checked',true); // 说明全选应该被选中了
}else{
$('.checkAll').prop('checked',false); // 说明全选应该被取消了
}
});
// 3.2 减
$('.decrement').click(function(){
$(this).parents('tr').find('.chk').prop('checked',true);
// 1.数量-1 获取数量 - 1 ,修改数量
var num = $(this).next().val()-0;
// 减之前是几？就不让减了
num--;
console.log(num);
$(this).next().val(num);
// 2.小计改变 小计 = 数量 * 价格 ,赋值给小计
var price = $(this).parent().prev().text().substr(1)-0; // 截取 substr(1)
var totalPrice = num * price;
$(this).parent().next().text('￥'+totalPrice.toFixed(2));
// 3.改变总件
// 4.改变总价
changeTotalNumAndTotalPrice();
// console.log($(this));
if(num == 1){
// 禁用
$(this).prop('disabled',true);
$(this).css('cursor','not-allowed');
}
if($('.chk').length == $('.chk:checked').length){
$('.checkAll').prop('checked',true); // 说明全选应该被选中了
}else{
$('.checkAll').prop('checked',false); // 说明全选应该被取消了
}
});
// 4.删除单个商品
$('.del').click(function(){
// 删除a ，爸爸的爸爸
// $(this).parent().parent().remove();
if(confirm('你确定要删除吗？')){
$(this).parents('tr').remove();
changeTotalNumAndTotalPrice();
// 删除后，获取所有的剩余商品的编号，重置
// console.log( $('.bianhao'));
resetNum();
if($('tbody').children().length ===0){
$('table').remove();
$('.emptyCart').css('display','block');
}
}
// console.log($(this));
})
// 5.删除选中，点击了删除选中按钮，就删除选中的商品
$('#delSelect').click(function(){
if(confirm('你确定要删除吗？')){
$('.chk:checked').parents('tr').remove();
resetNum();
changeTotalNumAndTotalPrice();
// 我们怎么知道删完了呢？根据tbody的孩子的长度
console.log($('tbody').children());
if($('tbody').children().length ===0){
$('table').remove();
$('.emptyCart').css('display','block');
}
}
})
// 6.清空购物车
$('#clearCart').click(function(){
$('table').remove();
$('.emptyCart').css('display','block');
});
</script>
</body>
</html>
本文来自博客园，作者：公子初心，转载请注明原文链接：https://www.cnblogs.com/ixuhui/p/17298739.html
