jQuery购物车代码完整

转载

码海探险先锋 2024-10-30 12:10:05

文章标签 jQuery购物车代码完整 jquery 单选 css 输入框 文章分类 jQuery 前端开发

一、购物车页面效果图

jQuery购物车代码完整_单选

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,’’)”

jQuery购物车代码完整_jquery_02

//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();
	})

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。