jQuery實現購物車的增刪改查

Bei-Zhen發表於2020-11-05

一、購物車頁面效果圖

在這裡插入圖片描述
shop-cart.html的程式碼

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<title>北榛購物車</title>
		<!-- 引入css 初始化的css 檔案 -->
		<link rel="stylesheet" href="css/base.css">
		<!-- 引入公共樣式的css 檔案 -->
		<link rel="stylesheet" href="css/common.css">
		<!-- 引入car css -->
		<link rel="stylesheet" href="css/car.css">
		<!-- 先引入jquery  -->
		<script src="js/jquery.min.js"></script>
		<!-- 在引入我們自己的js檔案 -->
		<script src="js/car.js"></script>
	</head>

	<body>
		<div class="car-header">
			<div class="w">
				<div class="car-logo">
					<b>北榛購物車</b>
				</div>
			</div>
		</div>

		</div>
		<div class="c-container">
			<div class="w">
				<div class="cart-filter-bar">
					<em>全部商品</em>
				</div>
				<!-- 購物車主要核心區域 -->
				<div class="cart-warp">
					<!-- 頭部全選模組 -->
					<div class="cart-thead">
						<div class="t-checkbox">
							<input type="checkbox" name="" id="" class="checkall"> 全選
						</div>
						<div class="t-goods">商品</div>
						<div class="t-price">單價</div>
						<div class="t-num">數量</div>
						<div class="t-sum">小計</div>
						<div class="t-action">操作</div>
					</div>
					<!-- 商品詳細模組 -->
					<div class="cart-item-list">
						<div class="cart-item">
							<div class="p-checkbox">
								<input type="checkbox" name="" id="" class="j-checkbox">
							</div>
							<div class="p-goods">
								<div class="p-img">
									<img src="upload/p1.jpg" alt="">
								</div>
								<div class="p-msg">526.8元】經典兒童文學彩圖青少版八十天環遊地球中學生語文教學大綱</div>
							</div>
							<div class="p-price">12.60</div>
							<div class="p-num">
								<div class="quantity-form">
									<a href="javascript:;" class="decrement">-</a>
									<!-- 讓輸入框只能輸入正整數 onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"-->
									<input type="text" class="itxt" value="1" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
									<a href="javascript:;" class="increment">+</a>
								</div>
							</div>
							<div class="p-sum">12.60</div>
							<div class="p-action"><a href="javascript:;">刪除</a></div>
						</div>
						<div class="cart-item">
							<div class="p-checkbox">
								<input type="checkbox" name="" id="" class="j-checkbox">
							</div>
							<div class="p-goods">
								<div class="p-img">
									<img src="upload/p2.jpg" alt="">
								</div>
								<div class="p-msg">2000張貼紙】貼紙書 3-6歲 貼畫兒童 貼畫書全套12冊 貼畫 貼紙兒童 汽</div>
							</div>
							<div class="p-price">24.80</div>
							<div class="p-num">
								<div class="quantity-form">
									<a href="javascript:;" class="decrement">-</a>
									<input type="text" class="itxt" value="1" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
									<a href="javascript:;" class="increment">+</a>
								</div>
							</div>
							<div class="p-sum">24.80</div>
							<div class="p-action"><a href="javascript:;">刪除</a></div>
						</div>
						<div class="cart-item">
							<div class="p-checkbox">
								<input type="checkbox" name="" id="" class="j-checkbox">
							</div>
							<div class="p-goods">
								<div class="p-img">
									<img src="upload/p3.jpg" alt="">
								</div>
								<div class="p-msg">唐詩三百首+成語故事全2冊 一年級課外書 精裝注音兒童版 小學生二三年級課外閱讀書籍</div>
							</div>
							<div class="p-price">29.80</div>
							<div class="p-num">
								<div class="quantity-form">
									<a href="javascript:;" class="decrement">-</a>
									<input type="text" class="itxt" value="1" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
									<a href="javascript:;" class="increment">+</a>
								</div>
							</div>
							<div class="p-sum">29.80</div>
							<div class="p-action"><a href="javascript:;">刪除</a></div>
						</div>
					</div>

					<!-- 結算模組 -->
					<div class="cart-floatbar">
						<div class="select-all">
							<input type="checkbox" name="" id="" class="checkall">全選
						</div>
						<div class="operation">
							<a href="javascript:;" class="remove-batch"> 刪除選中的商品</a>
							<a href="javascript:;" class="clear-all">清理購物車</a>
						</div>
						<div class="toolbar-right">
							<div class="amount-sum">已經選<em>0</em>件商品</div>
							<div class="price-sum">總價: <em>00.00</em></div>
							<div class="btn-area">去結算</div>
						</div>
					</div>
				</div>
			</div>

		</div>

	</body>

</html>

car.js程式碼

$(function(){
	//1.當全選改變時
	$(".checkall").change(function(){
		//單選跟隨全選變化
		$(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));
		//單選的css變化
		if($(this).prop("checked")){
			$(".cart-item").addClass("check-cart-item");
		} else {
			$(".cart-item").removeClass("check-cart-item");
		}
		//重新整理總價
		flushSumPrice();
	})
	
	//2.當單選改變時
	$(".j-checkbox").change(function(){
		//全選跟隨單選變化
		if($(".j-checkbox:checked").length == $(".j-checkbox").length){
			$(".checkall").prop("checked",true);
		} else {
			$(".checkall").prop("checked",false);
		}
		//單選的css變化
		if($(this).prop("checked")){
			$(this).parents(".cart-item").addClass("check-cart-item");
		} else {
			$(this).parents(".cart-item").removeClass("check-cart-item");
		}
		//重新整理總價
		flushSumPrice();
	})
	
	//3.增減商品,修改價格
	//點選加號時
	$(".increment").click(function(){
		//獲得輸入框的數量
		var num = $(this).siblings(".itxt").val();
		//加一
		num++;
		that = this;
		//重新整理小計
		flushSum(that,num);
		//重新整理總價
		flushSumPrice();
	})
	//點選減號時
	$(".decrement").click(function(){
		//獲得輸入框的數量
		var num = $(this).siblings(".itxt").val();
		//如果數量大於一
		if(num > 1){
			//減一
			num--;
		}
		that = this;
		//重新整理小計
		flushSum(that,num);
		//重新整理總價
		flushSumPrice();
	})
		
	//4.使用者修改輸入框
	$(".itxt").change(function(){
		//獲得輸入框的數量
		var num = $(this).val();
		//判斷是否輸入有誤
		if(num == ""){
			alert("輸入有誤");
			num = 1;
			$(this).val(1);
		}
		that = this;
		//重新整理小計
		flushSum(that,num);
		//重新整理總價
		flushSumPrice();
	})
	
	//5.刪除商品,清空購物車
	//當點選商品後面的刪除按鈕時
	$(".p-action a").click(function(){
		//刪除當前商品
		$(this).parents(".cart-item").remove();
		//重新整理總價
		flushSumPrice();
	})
	//刪除選中的商品
	$(".remove-batch").click(function(){
		//刪除勾選的商品
		$(".j-checkbox:checked").parents(".cart-item").remove();
		//重新整理總價
		flushSumPrice();
	})
	//清空購物車
	$(".clear-all").click(function(){
		//刪除所有商品
		$(".cart-item").remove();
		//重新整理總價
		flushSumPrice();
	})
	
	//重新整理總計和總數量
	function flushSumPrice(){
		//總件數
		var count = 0;
		//總價錢
		var money = 0;
		
		//遍歷數量
		$(".itxt").each(function(i,ele){
			//如果勾選上了
			if($(this).parents(".cart-item").find(".j-checkbox").prop("checked") == true){
				//累加
				count += parseInt($(ele).val());
			}
		})
		//重新整理總數量
		$(".amount-sum em").text(count);
		
		//遍歷價錢
		$(".p-sum").each(function(i,ele){
			//如果勾選上了
			if($(this).parents(".cart-item").find(".j-checkbox").prop("checked") == true){
				//累加
				money += parseFloat($(ele).text().substr(1));
			}
		})
		//重新整理總價錢
		$(".price-sum em").text("¥" + money.toFixed(2));
	}
		
	//重新整理小計
	function flushSum(that,num){
		//判斷庫存
		if(num > 999){
			alert("庫存不足");
			num = 1;
			$(that).val(1);
		}
		//重新整理商品數量
		$(that).siblings(".itxt").val(num);
		//獲得商品的價格
		var price = $(that).parents(".p-num").siblings(".p-price").text();
		//擷取字串並轉型
		price = parseFloat(price.substr(1));
		//獲得商品小計
		sum = num * price;
		//重新整理商品小計,商品小計保留兩位小數
		$(that).parents(".p-num").siblings(".p-sum").text("¥"+sum.toFixed(2));
	}
})

購物車共分為全選、單選、增減商品,修改價格、使用者修改輸入框、刪除商品,清空購物車五個小模組

二、全選

首先要定義兩個方法,重新整理總價和總數量以及重新整理小計,因為單選、反選、增刪改查操作會複用這兩個方法,所有把它單獨抽取出來封裝。
注意:字串擷取substr(1),保留兩位小數toFixed(2)

//重新整理總計和總數量
	function flushSumPrice(){
		//總件數
		var count = 0;
		//總價錢
		var money = 0;
		
		//遍歷數量
		$(".itxt").each(function(i,ele){
			//如果勾選上了
			if($(this).parents(".cart-item").find(".j-checkbox").prop("checked") == true){
				//累加
				count += parseInt($(ele).val());
			}
		})
		//重新整理總數量
		$(".amount-sum em").text(count);
		
		//遍歷價錢
		$(".p-sum").each(function(i,ele){
			//如果勾選上了
			if($(this).parents(".cart-item").find(".j-checkbox").prop("checked") == true){
				//累加
				money += parseFloat($(ele).text().substr(1));
			}
		})
		//重新整理總價錢
		$(".price-sum em").text("¥" + money.toFixed(2));
	}
		
	//重新整理小計
	function flushSum(that,num){
		//判斷庫存
		if(num > 999){
			alert("庫存不足");
			num = 1;
			$(that).val(1);
		}
		//重新整理商品數量
		$(that).siblings(".itxt").val(num);
		//獲得商品的價格
		var price = $(that).parents(".p-num").siblings(".p-price").text();
		//擷取字串並轉型
		price = parseFloat(price.substr(1));
		//獲得商品小計
		sum = num * price;
		//重新整理商品小計,商品小計保留兩位小數
		$(that).parents(".p-num").siblings(".p-sum").text("¥"+sum.toFixed(2));
	}

思路:單選跟隨全選變化,單選的css變化,並重新整理總價

//1.當全選改變時
	$(".checkall").change(function(){
		//單選跟隨全選變化
		$(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));
		//單選的css變化
		if($(this).prop("checked")){
			$(".cart-item").addClass("check-cart-item");
		} else {
			$(".cart-item").removeClass("check-cart-item");
		}
		//重新整理總價
		flushSumPrice();
	})

三、單選

思路:全選跟隨單選變化,單選的css變化,並重新整理總價

//2.當單選改變時
	$(".j-checkbox").change(function(){
		//全選跟隨單選變化
		if($(".j-checkbox:checked").length == $(".j-checkbox").length){
			$(".checkall").prop("checked",true);
		} else {
			$(".checkall").prop("checked",false);
		}
		//單選的css變化
		if($(this).prop("checked")){
			$(this).parents(".cart-item").addClass("check-cart-item");
		} else {
			$(this).parents(".cart-item").removeClass("check-cart-item");
		}
		//重新整理總價
		flushSumPrice();
	})

四、增減商品,修改價格

思路:點選加號時,獲得輸入框的數量,加一,重新整理小計,重新整理總價。減同理,注意只能減到一件

//3.增減商品,修改價格
	//點選加號時
	$(".increment").click(function(){
		//獲得輸入框的數量
		var num = $(this).siblings(".itxt").val();
		//加一
		num++;
		that = this;
		//重新整理小計
		flushSum(that,num);
		//重新整理總價
		flushSumPrice();
	})
	//點選減號時
	$(".decrement").click(function(){
		//獲得輸入框的數量
		var num = $(this).siblings(".itxt").val();
		//如果數量大於一
		if(num > 1){
			//減一
			num--;
		}
		that = this;
		//重新整理小計
		flushSum(that,num);
		//重新整理總價
		flushSumPrice();
	})

五、使用者修改輸入框

思路:獲得輸入框的數量,判斷是否輸入有誤,重新整理小計,重新整理總價

注意:不能讓輸入框輸入非法字元,負數,小數以及很大的數量

在shop-cart.html網頁的輸入框加入 οnkeyup=“value=value.replace(/(0+)|[\d]+/g,’’)”
在這裡插入圖片描述

//4.使用者修改輸入框
	$(".itxt").change(function(){
		//獲得輸入框的數量
		var num = $(this).val();
		//判斷是否輸入有誤
		if(num == ""){
			alert("輸入有誤");
			num = 1;
			$(this).val(1);
		}
		that = this;
		//重新整理小計
		flushSum(that,num);
		//重新整理總價
		flushSumPrice();
	})

六、刪除商品,清空購物車

思路:當點選商品後面的刪除按鈕時,刪除當前商品,重新整理總價。刪除選中和清空同理

//5.刪除商品,清空購物車
	//當點選商品後面的刪除按鈕時
	$(".p-action a").click(function(){
		//刪除當前商品
		$(this).parents(".cart-item").remove();
		//重新整理總價
		flushSumPrice();
	})
	//刪除選中的商品
	$(".remove-batch").click(function(){
		//刪除勾選的商品
		$(".j-checkbox:checked").parents(".cart-item").remove();
		//重新整理總價
		flushSumPrice();
	})
	//清空購物車
	$(".clear-all").click(function(){
		//刪除所有商品
		$(".cart-item").remove();
		//重新整理總價
		flushSumPrice();
	})

相關文章