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">【5本26.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();
	})

關於ToDolist 的增刪改查用jQuery來實現
2018-05-29
jQuery
【jquery】實現購物車加減
2020-11-30
jQuery
js實現表格的增刪改查
2019-04-12
JS
jquery基本操作增刪改查有哪些？
2020-01-08
jQuery
Go實現對MySQL的增刪改查
2021-09-09
GoMySql
運用layui實現增刪改查
2019-07-11
UI
Java實現簡單的增刪改查操作
2020-07-21
Java
單連結串列實現增刪改查
2020-11-16
mybatis實現MySQL資料庫的增刪改查
2020-12-29
MyBatisMySql資料庫
增刪改查
2024-03-23
Node.js+Express+Mysql 實現增刪改查
2019-04-02
Node.jsExpressMySql
Mybatis-plus實現簡單增刪改查
2020-10-21
MyBatis
Entity Framework使用DBContext實現增刪改查示例
2023-02-06
FrameworkContext
封裝模組實現商品增刪改查
2021-01-03
封裝
列表的增刪改查
2018-07-31
字典的增刪改查
2018-08-01
layui的增刪改查
2019-07-10
UI
mybatis的增刪改查
2024-12-05
MyBatis
redist的增刪改查
2020-12-29
Redis
Node+Vue實現對資料的增刪改查
2018-10-26
Vue
寫一個簡單的Linkedlist，實現增刪改查
2018-11-22
使用Mongoose類庫實現簡單的增刪改查
2018-07-03
Go
購物車的實現原理
2019-03-10
webpack4+express+mongodb+vue 實現增刪改查
2018-11-08
WebExpressMongoDBVue
JDBC連線mysql-8.0實現增刪改查
2018-06-24
JDBCMySql
python 連線mongodb實現增刪改查例項
2018-05-30
PythonMongoDB
SpringMVC+Spring Data JPA實現增刪改查操作
2018-03-17
SpringMVC
第一個mybatis程式，實現增刪改查CRUD
2023-05-05
MyBatis
連線資料庫並實現增、刪、改、查
2024-11-05
資料庫
JDBC連線資料庫實現增刪改查
2024-12-03
JDBC資料庫
koa+mysql實現增刪改查-全棧之路
2021-09-09
MySql全棧
IDEA SpringBoot-Mybatis-plus 實現增刪改查(CRUD)
2022-04-22
IdeaSpring BootMyBatis
SQL增刪改查
2018-08-21
SQL
Mongoose查增改刪
2023-12-02
Go
indexedDB 增刪改查
2020-07-13
Index
mysql增刪改查
2020-10-18
MySql
JSP實現servlet對資料庫的增刪查改操作
2020-10-31
JSServlet資料庫
jQuery 加入購物車彈窗
2019-01-20
jQuery