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="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="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="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="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="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>
<!--遮罩層結束-->