jQuery实现购物车功能的案例
jQuery实现购物车功能的案例
用jquery写了一个购物车的案例
功能如下
- 1,全选按钮和单个复选框的功能
- 2,商品数量的加减
- 3,单个商品总价随着商品数量的增减变化
- 4,实现了商品总数的变化
- 5,实现所有商品价钱之和随着商品的件数变化而变化
- 6,添加了单个商品删除功能
- 7,添加了清空购物车功能
下面是代码展示
<body>
<div class="box">
<div class="title">
<div><input class="allkinds" type="checkbox">全选</div>
<div>单价</div>
<div>数量/(多少)</div>
<div>合计</div>
<div>操作</div>
</div>
<div class="one">
<div><input class="kinds" type="checkbox">生菜</div>
<div class=" price">¥12.60</div>
<div class="we">
<button class="left">-</button>
<input class="num" type="text" value="1">
<button class="right">+</button>
</div>
<div class=" priceall">¥12.60</div>
<button class="delete">删除</button>
</div>
<div class="one">
<div><input class="kinds" type="checkbox">白菜</div>
<div class=" price">¥8.00</div>
<div class="we">
<button class="left">-</button>
<input class="num" type="text" value="1">
<button class="right">+</button>
</div>
<div class=" priceall">¥8.00</div>
<button class="delete">删除</button>
</div>
<div class="one">
<div><input class="kinds" type="checkbox">花菜</div>
<div class=" price">¥8.60</div>
<div class="we">
<button class="left">-</button>
<input class="num" type="text" value="1">
<button class="right">+</button>
</div>
<div class=" priceall">¥8.60</div>
<button class="delete">删除</button>
</div>
<div class="one">
<div><input class="kinds" type="checkbox">青菜</div>
<div class=" price">¥12.50</div>
<div class="we">
<button class="left">-</button>
<input class="num" type="text" value="1">
<button class="right">+</button>
</div>
<div class=" priceall">¥12.50</div>
<button class="delete">删除</button>
</div>
<div class="foot">
<button class="over">清空商品</button> 你买了
<h6></h6>件商品,一共是:
<h5></h5>元
<button>结算</button>
</div>
</div>
</body>
$(function() {
// 1.全选按功能模块
$('.allkinds').change(function() {
$('.kinds').prop('checked', $(this).prop('checked'))
})
$('.kinds').change(function() {
// 用:checked选择器 直接查找被选中的元素
//如果被选中的复选框的个数等于 所有复选框的个数,那就把全选给选上
if ($('.kinds:checked').length === $('.kinds').length) {
$('.allkinds').prop('checked', true)
} else {
$('.allkinds').prop('checked', false)
}
})
//2.数量的加减模块
// 加模块
$('.right').click(function() {
// 点击得到当前文本框的值,
var i = $(this).siblings('.num').val();
i++;
//每次点击都加1,然后把值放进文本框中
$(this).siblings('.num').val(i);
//合计加模块
var p = $(this).parent().siblings('.price').text()
//截取从第二位开始
p = p.substr(1);
// toFixed()方法保留几位小数,这里我需要计算后保留小数后两位
var sum = (p * i).toFixed(2);
$(this).parent('.we').siblings('.priceall').text("¥" + sum)
sumall();
})
// 减模块
$('.left').click(function() {
// 点击得到当前文本框的值,
var i = $(this).siblings('.num').val();
//这里做一个判断.如果数量小于1,那就不执行自减;
if ($(this).siblings('.num').val() > 1) {
i--;
} else {
return false;
}
//每次点击都减1,然后把值放进文本框中
$(this).siblings('.num').val(i);
//合计减模块
//p是单价
var p = $(this).parent().siblings('.price').text()
p = p.substr(1);
var sum = (p * i).toFixed(2);
$(this).parent('.we').siblings('.priceall').text("¥" + sum)
// console.log(i, p);
sumall();
})
//3 当我文本框的值发生变化,总价也要发生变化
$('.num').change(function() {
//n是文本框修改后的值
var n = $(this).val();
// p是单价
var p = $(this).parent().siblings('.price').text()
p = p.substr(1);
var sum = (p * n).toFixed(2);
$(this).parent('.we').siblings('.priceall').text("¥" + sum)
sumall();
})
//先调用一下,页面初始状态就可以获取到商品总数和花费总数
sumall()
//商品总数和花费总数
//求和
function sumall() {
//总件数
var count = 0;
//总花费
var money = 0;
//遍历文本框的值,然后相加
$.each($('.num'), function(i, ele) {
count += parseInt($(ele).val());
})
$('.foot>h6').text(count)
//花费
$.each($('.priceall'), function(i, ele) {
money += parseFloat($(ele).text().substr(1));
})
$('.foot>h5').text("¥" + money.toFixed(2))
}
// 想求得商品总数,就要遍历文本框的值 $.each()方法可以进行遍历
//删除商品模块
//单个删除
$('.delete').click(function() {
$(this).parent('.one').remove()
sumall();
})
//一起删除
$('.over').click(function() {
$(this).parents().siblings('.one').remove()
sumall();
})
})
