正文
JQuery编写简易京东购物车功能
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
前天无意间看到有一位程序员的博客，有一篇名为无聊时编写的购物车，看了之后，只是觉得很垃圾，因为代码很臃肿，当然我写的也不咋地，当然我也是复 习一下所学的js，再敲这个的期间遇到了如下问题,1:子元素父元素的混乱使用，层次没了解清楚就上手写！2：类型转换的问题，其中结算部分的 ParesFloat和ParesInt以及.toFixed(2)的四舍五入,类型的把握，当然因为懒得弄，所以就直接写在了html里面，所以最好还是js文件独立出来，这样代码简洁，处理起来方便，好了废话不多说，上代码！
///js部分
<script type="text/javascript">
$(function () {
//绑定加号
$(".plus").click(function () {
var num = parseInt($(this).siblings(".num").text());//定义一个变量存储数字的增加
$(this).siblings(".num").text(num + 1);//数字加
calPrice()
})
//绑定减号
$(".minus").click(function () {
var num = parseInt($(this).siblings(".num").text())
if (num == 1) return;
$(this).siblings(".num").text(num - 1);
calPrice()
})
//这个函数的意思就是说在增减函数上加一个点击事件，点击事件里面新建一个变量来存储增减的数字，
//利用同级节点siblings来找到显示的框，然后找到后直接增减。
//单个店铺全选功能
$(".shop-name input[type=checkbox]").click(function () {
//找单个店铺单选后，应该继续加事件，当选中店铺总单选框后应该所有的店铺的单选框都被选中
//此处应该先找他们共同的父亲然后再去找店铺里面用ul装着的单选框,然后进行判断，判断复选框是否被选中
if ($(this).prop("checked")) {
$(this).parents(".shop-group-item").find("ul li input[type=checkbox]").prop("checked", true);
}
else {
$(this).parents(".shop-group-item").find("ul li input[type=checkbox]").prop("checked",false);
}
checkAllGod()
calPrice()
});
//选中第一个影响到第二个店铺了
//单个复选框事件
$(".shop-info input[type=checkbox]").click(function () {
//需求：当单个店铺内的所有复选框被选中则将店铺全选框选中，取消一个则取消店铺全选框的全选
//需要获取选中的店铺的个数，需要获得没有选中店铺的个数，两个数量相等时则选中店铺复选框
var goodNum = $(this).parents(".shop-group-item").find("ul li input[type=checkbox]").length;
var goodSelect = $(this).parents(".shop-group-item").find("ul li input[type=checkbox]:checked").length;
if (goodNum == goodSelect) {
$(this).parents(".shop-group-item").find(".shop-name input[type=checkbox]").prop("checked", true);
}
else {
$(this).parents(".shop-group-item").find(".shop-name input[type=checkbox]").prop("checked", false);
}
checkAllGod()
calPrice()
});
//店铺总全选功能
//需求：要求选中购物车全选按钮时所有的复选框全部都被选中，否则购物车全选按钮取消选中
//建立一个判断函数，判断全选按钮的状态
function checkAllGod() {
var AllNum = $(".shop-group-item").length;
var AllSelect = $(".shop-group-item .shop-name input[type=checkbox]:checked").length;
if (AllNum ==AllSelect) {
$("#AllCheck").prop("checked", true);
}
else {
$("#AllCheck").prop("checked", false);
}
}//这个函数用来判断每一个店铺的复选框是否被选中从而选中最大的复选框
//总店铺全选功能
$("#AllCheck").click(function () {
if ($(this).prop("checked")) {
$(".shop-group-item input[type=checkbox]").prop("checked", true);
}
else {
$(".shop-group-item input[type=checkbox]").prop("checked", false);
}
});
//结算函数
function calPrice() {
//遍历商店
//定义购物车总价变量
var totaPrice = 0;
$(".shop-group-item").each(function () {
//定义本店总计变量
var Shopprice = 0;
//开始遍历店铺内有多少商品
$(this).find("ul li input[type=checkbox]:checked").each(function () {
//建立商品单价变量 找到商品单价并做好类型转换赋值给变量
var shoppingrice = parseFloat($(this).siblings(".shop-info-text").find(".price").text());
//建立商品数量变量，找打数量并做好类型转换赋值给变量
var num = parseInt($(this).siblings(".shop-info-text").find(".num").text());
//店铺总计等于数量乘以单价,循环加
Shopprice += (shoppingrice * num);
});
//找到店铺总计显示出将金额赋值,并做好类型转换 toFixed()
$(this).find(".shopPrice span ").text(Shopprice.toFixed(2));
//计算购物车商品总价
totaPrice += Shopprice;
});
//将商品总价赋值
$("#AllTotal").text(totaPrice);
}
//删除函数
$(".coupons a").click(function () {
$(".jd_win").show();
$shop = $(this).parents(".shop-group-item");
});
//删除确认事件
$(".submit").click(function () {
//判断有哪些商品的的按钮被选中了，选中了调用remove方法
//如果选中的是店铺按钮，则删除整个店铺
if ($shop.find("div>input[type=checkbox]").prop("checked")) {
$shop.remove();
}
else {
//否则一列一列的删除
$shop.find("ul li input[type=checkbox]:checked").parents("li").remove();
}
$(".jd_win").hide();
calPrice();
});
//删除取消事件
$(".cancle").click(function () {
$(".jd_win").hide();
});
});
</script>
///js部分
///html部分
<!--头部开始-->
<div class="header">
<h1>购物车</h1>
<a href="#" class="back"><span></span></a>
<a href="#" class=""></a>
</div>
<!--头部结束-->
<div class="shopping">
<div class="shop-group-item">
<div class="shop-name">
<input type="checkbox" class="check goods-check shopCheck">
<h4><a href="#">苹果专卖店</a></h4>
<div
class="coupons"><span>领券</span><em>|</em><
span>编辑</span><em>|</em><span><a
href="#">删除</a></span></div>
</div>
<ul>
<li>
<div class="shop-info">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
<div class="shop-info-text">
<h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
<div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">100.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="minus">-</a>
<span class="num" >1</span>
<a href="javascript:;" class="plus">+</a>
</div>
</div>
</div>
</div>
</li>
<li><div class="shop-info">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
<div class="shop-info-text">
<h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
<div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">100.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="minus">-</a>
<span class="num" >1</span>
<a href="javascript:;" class="plus">+</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="shop-info">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
<div class="shop-info-text">
<h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
<div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">100.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="minus">-</a>
<span class="num" >1</span>
<a href="javascript:;" class="plus">+</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="shopPrice">本店总计：￥<span class="shop-total-amount ShopTotal">0.00</span></div>
</div>
<div class="shop-group-item">
<div class="shop-name">
<input type="checkbox" class="check goods-check shopCheck">
<h4><a href="#">苹果专卖店</a></h4>
<div
class="coupons"><span>领券</span><em>|</em><
span>编辑</span><em>|</em><span><a
href="#">删除</a></span></div>
</div>
<ul>
<li>
<div class="shop-info">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
<div class="shop-info-text">
<h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
<div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">100.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="minus">-</a>
<span class="num" >1</span>
<a href="javascript:;" class="plus">+</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="shop-info">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
<div class="shop-info-text">
<h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
<div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">100.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="minus">-</a>
<span class="num" >1</span>
<a href="javascript:;" class="plus">+</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="shopPrice">本店总计：￥<span class="shop-total-amount ShopTotal">0.00</span></div>
</div>
</div>
<div class="payment-bar">
<div class="all-checkbox"><input type="checkbox" class="check goods-check" id="AllCheck">全选</div>
<div class="shop-total">
<strong>总价：<i class="total" id="AllTotal">0.00</i></strong>
<span>减免：123.00</span>
</div>
<a href="#" class="settlement">结算</a>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
<!--以下是遮罩层-->
<div class="jd_win">
<div class="jd_win_box">
<div class="jd_win_tit">你确定删除这些商品吗？</div>
<div class="jd_btn clearfix">
<a href="#" class="cancle f_left">取消</a>
<a href="#" class="submit f_right">确定</a>
</div>
</div>
</div>
<!--遮罩层结束-->
///html部分
