用jQuery做一个简单的购物车

用jQuery做一个简单的购物车

前言:

之前用的JavaScript做的,现在结合jQuery再试一下。效果虽然差不多,但是对于了解和学习jQuery选择器还有事件等可以有一个更好的了解。

(img)自行准备,部分代码优化,大佬多指教


关于循环可以用jQuery里面的each

实现功能:

  • 将商品添加到购物车(如果购物车有相同物品则累加对应数量)
  • 小计计算与总和
  • 积分计算与总和
  • 实现数量的增加和减少(并同步小计和积分及其总和)
  • 单个商品删除
  • 批量删除

实现效果:

用jQuery做一个简单的购物车_第1张图片

CSS代码:

#info-table{text-align: center;}
#info-input{width: 1200px;margin: 0px auto;}
#info-input>div{
	width: 1200px;
	margin: 20px 0px;
}
.shopCount{color: orange;}
a{text-decoration: none;color: deepskyblue;}
#resultTotalMoney,#integralTotal{color: orange;}
.total-div{text-align: right;}
.btdelete{float: left;}
.btorinter-div{height: auto;overflow: auto;}
.viewIntegral{float: right;}
.btbuy{background-color: orange;color: white;border: 0px;float: right;}
#shop{
	width: 800px;margin: 0px auto;
	height: auto;
	overflow: auto;
}
#shop li{
	text-align: center;
	list-style: none;
	float: left;
	height: auto;
	overflow: auto;
	margin: 20px;
}
#shop a{
	display: block;
	height: auto;
	overflow: auto;
}
.price{color: red;}

HTML+jQuery代码:


<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery实现购物车title>
	head>
	<link rel="stylesheet" type="text/css" href="css/mycart.css"/>
	<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8">script>
	<script type="text/javascript">
		$(function(){
			// 全选
			$("#allCheck").click(function(){
				$(".selectOne").prop("checked",$(this).prop("checked"));
			})
			
			// 单个删除
			$("#mytable").on("click",".delete",function(){
				if (confirm("是否将该物品移除购物车?")){
					$(this).parents("tr").remove();
					// 刷新总价
					allShopPriceTotal();
				}
			})
			
			// 批量删除
			$(".btdelete").on("click",function(){
				if (confirm("是否从购物车移除选择的所有商品?")){
					$(".selectOne:checked").parents("tr").remove();
					// 刷新总价
					allShopPriceTotal();
				}
			})
			// 添加
			$(".showShop").click(function(){
				if (confirm('是否将该商品添加到购物车?')){
					// 判断该商品是否已经存在在购物车内
					var tableShop =  $(".imgbackground").children("img");
					for (var i = 0; i < tableShop.length;i++) {
						if ($(this).children("img")[0].src == tableShop[i].src){
							// 存在则增加相应的数量
							return $("#plus").click();
						}
					}
					// 不存在则添加到购物车
					var html = "";
					html += '';
					html += '';
					html += ''+ parseInt(parseInt($(this).children("span")[0].innerHTML)/20) +'';
					html += ''+ $(this).children("span")[0].innerHTML +'';
					html += ' ';
					html += ';
					html += '0';
					html += '删除';
					html += '';
					$("#mytable").children("tbody").append(html);
					
					// 初始化全部商品小计
					singleAllSubTotal();
				}
			})
			
			// 商品数量的增加
			$("#mytable").on("click","#plus",function(){
				$(this).prev().val(parseInt($(this).prev().val()) + 1);
				// 小计
				singleSubTotal($(this).parent().next());
			})
			
			// 商品数量的减少
			$("#mytable").on("click","#reduce",function(){
				if ($(this).next().val() == 1){
					return;
				}
				$(this).next().val(parseInt($(this).next().val()) - 1);
				// 小计
				singleSubTotal($(this).parent().next());
			})
			
			// 初始化全部商品小计
			function singleAllSubTotal(){
				var obj = $(".shopCount");
				for(shopCount of obj){
					singleSubTotal(shopCount);
				}
			}
			// 计算单个商品的小计
			function singleSubTotal(obj){
				var price = $(obj).parents("tr").children(".price").html();
				var count =$(obj).prev().children("#count").val();
				$(obj).html(eval((price + "*" + count)));
				// 所有商品的总价钱
				allShopPriceTotal();
			}
			
			// 所有商品的总价钱
			function allShopPriceTotal(){
				var allSingelSub = $(".shopCount");
				var sum = "0";
				for (singelSub of allSingelSub){
					if (sum != ""){
						sum += "+";
					}
					sum += $(singelSub).html();
				}
				$("#resultTotalMoney").html(eval(sum));
				// 可得积分总和
				allIntegralTotal();
			}
			
			// 可得积分总和
			function allIntegralTotal(){
				// 所有积分对象
				var allSingelIntegral = $(".integral");
				// 计算集
				var sum = "0";
				for (singelIntegral of allSingelIntegral){
					// 数量
					var count = $(singelIntegral).next().next().children("#count").val();
					if (sum != ""){
						sum += "+";
					}
					sum += $(singelIntegral).html() + "*" + count;
				}
				$("#integralTotal").html(eval(sum));
			}
			// 鼠标移动改变背景颜色
			$("#mytable").on("mousemove",".imgbackground",function(){
				$(this).css("background-color","orange");
			}).on("mouseleave",".imgbackground",function(){
				$(this).css("background-color","white");
			})
			
			// 立即购买
			$(".btbuy").click(function(){
				if (confirm("是否全部购买!")){
					$("tr").not($("#mytable").children("tbody").children("tr")[0]).remove();
					// 所有商品的总价钱
					allShopPriceTotal();
				}
			})
			
			//初始化全部商品小计
			singleAllSubTotal();
		})
		
	script>
	head>
	<body>
		<div>
			<div id="shop">
				<ul>
					<li>
						<a href="#" class="showShop">
							<img src="img/a.jpg" height="100" width="100"/><br />
							<span class="price">4999.00span>¥<br />
							添加至购物车
						a>
					li>
					<li>
						<a href="#" class="showShop">
							<img src="img/b.jpg" height="100" width="100"/><br />
							<span class="price">1999.00span>¥<br />
							添加至购物车
						a>
					li>
					<li>
						<a href="#" class="showShop">
							<img src="img/c.jpg" height="100" width="100"/><br />
							<span class="price">3999.00span>¥<br />
							添加至购物车
						a>
					li>
					<li>
						<a href="#" class="showShop">
							<img src="img/d.jpg" height="100" width="100"/><br />
							<span class="price">999.00span>¥<br />
							添加至购物车
						a>
					li>
					<li>
						<a href="#" class="showShop">
							<img src="img/e.jpg" height="100" width="100"/><br />
							<span class="price">5666.00span>¥<br />
							添加至购物车
						a>
					li>
				ul>
			div>
			<div id="info-table">
				<h1>购物车h1>
				<table id="mytable"  width="1200" align="center">
					<tr>
						<th><input type="checkbox" id="allCheck"/>全选th>
						<th>店铺宝贝th>
						<th>获积分th>
						<th>单价(元)th>
						<th>数量th>
						<th>小计(元)th>
						<th>操作th>
					tr>
					<tr>
						<td><input type="checkbox"  class="selectOne" />td>
						<td class="imgbackground"><img src="img/a.jpg" height="100" width="100"/>td>
						<td class="integral">249td>
						<td class="price">4999.00td>
						<td>
							<button id="reduce">-button>
							<input type="text" id="count" size="1" readonly="true" value="1"/>
							<button id="plus">+button>
						td>
						<td class="shopCount">0td>
						<td><a href="#" class="delete">删除a>td>
					tr>
					
				table>
			div>
			<div id="info-input">
				<div class="total-div">
					<span>商品总价(不含运费):<span id="resultTotalMoney">0span>span>
				div>
				<div class="btorinter-div">
					<button  class="btdelete">删除所选button>
					<span class="viewIntegral">可获积分:<span id="integralTotal">0span>span>
				div>
				<div>
					<button class="btbuy" >立即购买button>
				div>
			div>
		div>
	body>
html>

之间涉及到的document与jQuery对象之间的转换,额。。感觉自己试着试着就出来了。。。

你可能感兴趣的:(jQuery)