jquery实现简易购物车

最新推荐文章于 2024-04-12 19:02:55 发布
最新推荐文章于 2024-04-12 19:02:55 发布
阅读量450 收藏 2
点赞数 1
分类专栏： 具体功能实现 文章标签： jquery 前端 javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FEIFANFENG123/article/details/132522144
版权

目前学到js和jquery，然后老师就布置了一道购物车的题目，简单实现一下，完整代码在最后
js实现的也有，只不过比较麻烦，有需要再整理
在这里插入图片描述

需要实现的功能

  1. 点击加入购物车，商品出现在下面表格
  2. 重复的商品不会追加，而是数量+1
  3. 可以在购物车中对商品进行数量的加减操作
  4. 计算商品金额和总金额
  5. 点击删除按钮，删掉购物车中该商品
  6. 添加、修改、删除对库存数的操作
  7. 当库存为0时，不能添加商品和执行加操作
  8. 当购物车中商品数量为1时，不能执行减操作

html代码

为了练习，老师并没有把标签都加上class或id

<table border="1px" width="400px" align="center" style="text-align: center;">

	<thead>
		<tr>
			<th>商品名称</th>
			<th>价格</th>
			<th>库存</th>
			<th>操作</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td class="pn">苹果</td>
			<td>5</td>
			<td>5</td>
			<td>
				<button type="button">加入购物车</button>
			</td>
		</tr>

		<tr>
			<td class="pn">橘子</td>
			<td>6</td>
			<td>6</td>
			<td>
				<button type="button">加入购物车</button>
			</td>
		</tr>

		<tr>
			<td class="pn">人参果</td>
			<td>60</td>
			<td>4</td>
			<td>
				<button type="button">加入购物车</button>
			</td>
		</tr>

		<tr>
			<td class="pn">蟠桃</td>
			<td>900</td>
			<td>3</td>
			<td>
				<button type="button">加入购物车</button>
			</td>
		</tr>
		
	</tbody>
</table>

<br><br>

<table border="1px" width="400px" align="center">
	<tr>
		<th>商品名称</th>
		<th>价格</th>
		<th>数量</th>
		<th>金额</th>
		<th>操作</th>
	</tr>


	<tbody id="products">
		<!-- <tr>
			<td>苹果</td>
			<td>5</td>
			<td>
				<input type="button" value="-" />
				<span>1</span>
				<input type="button" value="+" />
			</td>
			<td>5</td>
			<td>
				<button type="button" style="width: 30px;">x</button>
			</td>
		</tr> -->

	</tbody>

	<tfoot>
		<tr>
			<td colspan="4">总金额</td>
			<td id="totalMoney"></td>
		</tr>
	</tfoot>

</table>

添加购物车

$("table:first button").click(function() {

	var productName = $(this).parent().siblings("td:first").text();
	var price = $(this).parent().siblings("td:eq(1)").text();

	//先判断重复，再操作库存
	if (checkProduct(productName)) { //判断是否重复
		return;
	}
	if (!checkStock(productName, -1)) {
		return;
	}

	//组装一行
	var html =
		'<tr>' +
		'<td class="nameTd">' + productName + '</td>' +
		'<td>' + price + '</td>' +
		'<td>' +
		'<input type="button" value="-" οnclick="changeNum(this,-1)" />' +
		'<span>1</span>' +
		'<input type="button" value="+" οnclick="changeNum(this,1)"  />' +
		'</td>' +
		'<td class="moneyTd">' + price + '</td>' +
		'<td>' +
		'<button type="button" style="width: 30px;" οnclick="del(this)">x</button>' +
		'</td>' +
		'</tr>';

	$("#products").append(html);

	//计算总金额
	totalMoney();
});

计算总金额

function totalMoney() {
	var sum = 0;
	$("#products .moneyTd").each(function() {
		sum += parseFloat($(this).text());
	});
	$("#totalMoney").text(sum);
}

删除操作

function del(btn) {

	if (confirm("确定删除此商品")) {

		//修改库存
		var productName = $(btn).parent().siblings("td:eq(0)").text();
		var num = $(btn).parent().siblings("td:eq(2)").find("span").text();
		checkStock(productName, parseInt(num));

		$(btn).parent().parent().remove();

		//计算总金额
		totalMoney();

		$("span").text();
	}

}

修改数量，计算金额

//修改数量
function changeNum(btn, num) {
	/*
		修改库存
	 */
	var productName = $(btn).parent().siblings("td:first").text();

	if (!checkStock(productName, -num)) {
		return;
	}

	var span = $(btn).siblings("span:first");

	//修改数量
	var oldNum = span.text();

	if (oldNum == 1 && num == -1) {
		checkStock(productName, -1);
		return;
	}

	var newNum = parseInt(oldNum) + num;
	span.text(newNum);

	//修改金额
	var price = span.parent().siblings("td:eq(1)").text();
	span.parent().siblings("td:eq(2)").text(parseFloat(price) * newNum);

	//计算总金额
	totalMoney();
}

验证商品重复

//验证商品重复
function checkProduct(productName) {

	var flag = false;
	$("#products .nameTd").each(function() {

		if ($(this).text() == productName) {
			var btn = this.parentNode.getElementsByTagName("td")[2].getElementsByTagName("input")[1];
			changeNum(btn, 1);
			flag = true; //表示已添加购物车
		}

	});
	return flag;
}

修改库存

function checkStock(productName, num) {

	var flag = true;
	$("table:first .pn").each(function() {

		if ($(this).text() == productName) {
			var stockTd = $(this).siblings("td:eq(1)");
			var oldStock = stockTd.text();
			if (oldStock == 0 && num < 0) {
				flag = false;
			} else {
				stockTd.text(parseInt(oldStock) + num);
			}
		}

	});

	return flag;
}

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			button {
				width: 90px;
				height: 23px;
			}
		</style>

		<!--
			引入jquery文件
		 -->
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8">
		</script>

	</head>
	<body>

		<table border="1px" width="400px" align="center" style="text-align: center;">

			<thead>
				<tr>
					<th>商品名称</th>
					<th>价格</th>
					<th>库存</th>
					<th>操作</th>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td class="pn">苹果</td>
					<td>5</td>
					<td>5</td>
					<td>
						<button type="button">加入购物车</button>
					</td>
				</tr>

				<tr>
					<td class="pn">橘子</td>
					<td>6</td>
					<td>6</td>
					<td>
						<button type="button">加入购物车</button>
					</td>
				</tr>

				<tr>
					<td class="pn">人参果</td>
					<td>60</td>
					<td>4</td>
					<td>
						<button type="button">加入购物车</button>
					</td>
				</tr>

				<tr>
					<td class="pn">蟠桃</td>
					<td>900</td>
					<td>3</td>
					<td>
						<button type="button">加入购物车</button>
					</td>
				</tr>
			</tbody>


		</table>

		<br><br>

		<table border="1px" width="400px" align="center">
			<tr>
				<th>商品名称</th>
				<th>价格</th>
				<th>数量</th>
				<th>金额</th>
				<th>操作</th>
			</tr>


			<tbody id="products">
				<!-- <tr>
					<td>苹果</td>
					<td>5</td>
					<td>
						<input type="button" value="-" />
						<span>1</span>
						<input type="button" value="+" />
					</td>
					<td>5</td>
					<td>
						<button type="button" style="width: 30px;">x</button>
					</td>
				</tr> -->

			</tbody>

			<tfoot>
				<tr>
					<td colspan="4">总金额</td>
					<td id="totalMoney"></td>
				</tr>
			</tfoot>

		</table>

	</body>

	<script type="text/javascript">
		$("table:first button").click(function() {

			var productName = $(this).parent().siblings("td:first").text();
			var price = $(this).parent().siblings("td:eq(1)").text();

			//先判断重复，再操作库存
			if (checkProduct(productName)) { //判断是否重复
				return;
			}
			if (!checkStock(productName, -1)) {
				return;
			}


			//组装一行
			var html =
				'<tr>' +
				'<td class="nameTd">' + productName + '</td>' +
				'<td>' + price + '</td>' +
				'<td>' +
				'<input type="button" value="-" οnclick="changeNum(this,-1)" />' +
				'<span>1</span>' +
				'<input type="button" value="+" οnclick="changeNum(this,1)"  />' +
				'</td>' +
				'<td class="moneyTd">' + price + '</td>' +
				'<td>' +
				'<button type="button" style="width: 30px;" οnclick="del(this)">x</button>' +
				'</td>' +
				'</tr>';

			$("#products").append(html);

			//计算总金额
			totalMoney();
		});


		function totalMoney() {
			var sum = 0;
			$("#products .moneyTd").each(function() {
				sum += parseFloat($(this).text());
			});
			$("#totalMoney").text(sum);
		}


		function del(btn) {

			if (confirm("确定删除此商品")) {

				//修改库存
				var productName = $(btn).parent().siblings("td:eq(0)").text();
				var num = $(btn).parent().siblings("td:eq(2)").find("span").text();
				checkStock(productName, parseInt(num));

				$(btn).parent().parent().remove();

				//计算总金额
				totalMoney();

				$("span").text();
			}

		}

		//修改数量
		function changeNum(btn, num) {
			/*
				修改库存
			 */
			var productName = $(btn).parent().siblings("td:first").text();

			if (!checkStock(productName, -num)) {
				return;
			}

			var span = $(btn).siblings("span:first");

			//修改数量
			var oldNum = span.text();

			if (oldNum == 1 && num == -1) {
				checkStock(productName, -1);
				return;
			}

			var newNum = parseInt(oldNum) + num;
			span.text(newNum);

			//修改金额
			var price = span.parent().siblings("td:eq(1)").text();
			span.parent().siblings("td:eq(2)").text(parseFloat(price) * newNum);

			//计算总金额
			totalMoney();
		}

		//验证商品重复
		function checkProduct(productName) {

			var flag = false;
			$("#products .nameTd").each(function() {

				if ($(this).text() == productName) {
					var btn = this.parentNode.getElementsByTagName("td")[2].getElementsByTagName("input")[1];
					changeNum(btn, 1);
					flag = true; //表示已添加购物车
				}

			});
			return flag;
		}


		function checkStock(productName, num) {

			var flag = true;
			$("table:first .pn").each(function() {

				if ($(this).text() == productName) {
					var stockTd = $(this).siblings("td:eq(1)");
					var oldStock = stockTd.text();
					if (oldStock == 0 && num < 0) {
						flag = false;
					} else {
						stockTd.text(parseInt(oldStock) + num);
					}
				}

			});

			return flag;

		}
	</script>
</html>
秃头战士会cv
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
笨鸟学飞的博客
08-11 4万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
用jQuery做一个简单的购物车
StartChong
11-02 3874
用jQuery做一个简单的购物车 前言： 之前用的JavaScript做的，现在结合jQuery再试一下。效果虽然差不多，但是对于了解和学习jQuery选择器还有事件等可以有一个更好的了解。 (img)自行准备 实现功能： 将商品添加到购物车（如果购物车有相同物品则累加对应数量） 小计计算与总和 积分计算与总和 实现数量的增加和减少（并同步小计和积分及其总和） 单个商品删除 批量删除 实现效果...
jquery添加购物车复选框
04-28
jquery添加购物车复选框,全选,反选,取消,商品数量统计价格演示地址：http://www.jq22.com/jquery-info411
jQuery实现简易购物车
syy的博客
10-18 347
jQuery实现简易购物车
购物车实现
最新发布
记录学习，共同进步
04-12 903
使用redis的hash结构实现购物车
JS实现简单的购物车
dxn16638400024的博客
06-30 3259
中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查。由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！这个简单的购物车实现使用了一个对象。
案例：购物车 商品加减号
青衣的博客
09-02 550
<div class="c-container"> <div class="w"> <div class="cart-warp"> <!-- 头部全选模块 --> <div class="cart-thead"> <div class="t-checkbox"> <input type=.
实验五 实现购物车功能（jsp+javabean+jdbc+mysql数据库）
热门推荐
fenger_c的博客
05-10 2万+
想上传视频来着，觉得太麻烦，我就直接截图吧。购物车的基本功能都实现了，比如在商品显示在页面上，对了，我的图像，是放路径的，放图片的同学可以把自己的图片换上，加入购物车的时候，判断该商品是否在购物车内，是的话直接加1 ，不是直接插入，用到了虚拟账户，多少钱自己充，购买之后更新订单表，购物车表清空,商品表的库存也相应减少。其他的有些功能没有实现，可能里面还有写无关要的代码，那些可以删，当初想搞全面一点...
简单购物车jQuery实现
06-14
一个简单的使用jQuery实现的单页面购物车效果，可以实现添加到购物车，删除，数量和金额的增减，和合计金额的计算 等效果
Jquery练习1：制作简易的当当购物车页面.zip
08-27
Jquery练习1：制作简易的当当购物车页面.zip
用vue和node写的简易购物车实现
08-30
Vue与Node实现简易购物车 一、项目介绍 本项目是一个使用Vue和Node实现的简易购物车，前端使用Vue框架，后端使用Node.js接收前端请求并进行数据操作。该项目主要实现了三个小功能：展示商品列表、把商品加入购物车...
jQuery拖到商品添加购物车代码.zip
07-04
jQuery拖到商品添加购物车代码是一款拖动商品的图片放到右侧购物车里面特效。
jquery购物车代码（3种）
02-29
3种jquery实现的购物车页面。包括商品拖动到购物车，.net实现的xml格式！
简易购物车项目
06-12
JSP+servlet+模拟数据库建造的一个简易购物车，可以实现添加，删除功能，里面还有一个小小的BUG，希望大神指正，
简单的购物车实现
01-27
简单的购物车功能实现！ 数据库用mysql,mvc三层架构！
JavaScript编写一个简易购物车功能
10-21
【JavaScript简易购物车功能实现详解】 在Web开发中，购物车功能是电商网站不可或缺的一部分，它允许用户选择商品并暂存以便后续结算。本篇将详细介绍如何使用JavaScript（结合jQuery库）来创建一个简单的购物车...
基于Html5的简易购物车的实现.pdf
11-23
总的来说，基于HTML5的简易购物车实现是一个综合性的项目，涵盖了前端开发的基本技术，同时涉及到了数据存储、用户交互以及用户体验设计等多个方面。通过这样的实践，开发者可以深入理解网页开发的各个环节，提高...
JS&JQ添加购物车功能
qq_50822277的博客
12-30 3838
啥也不说。直接上代码！！！！ 第一步。引入script src=“jquery-3.3.1.min.js” 第二步。先写一个$ (function() {})函数。这里要说一下。这个$(function() {})是最大的函数。包住全部。下面的图片是加入购物车。再下面是分部 下面这些才是函数里面的东西、 添加购物车！！！！ 第三步。先找到加入购物车的a标签。然后分别找到a标签父亲的兄弟的文本——图片、商品名称、折扣价 //获取购物车标签#goods tr td a $('#go.
利用js和·jQuery实现简单购物车功能
qq_58829431的博客
08-24 240
整个代码的逻辑是基于JavaScript实现的购物车功能，对页面的增删改查操作和计算总价格等进行了处理。通过上述函数的调用，可以展示和操作购物车功能。
jquery简单实现购物车
12-27
以下是一个简单的使用jQuery实现购物车的例子： ```html <!DOCTYPE html> <html> <head> <title>购物车</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .item { margin-bottom: 10px; } .item input[type="checkbox"] { margin-right: 5px; } .total { font-weight: bold; } </style> </head> <body> <h1>购物车</h1> <div class="item"> <input type="checkbox" class="checkbox"> <span>商品1 - 100元</span> </div> <div class="item"> <input type="checkbox" class="checkbox"> <span>商品2 - 200元</span> </div> <div class="item"> <input type="checkbox" class="checkbox"> <span>商品3 - 300元</span> </div> <div class="total"> 总价：<span id="totalPrice">0</span>元 </div> <script> $(document).ready(function() { // 全选按钮点击事件 $("#selectAll").click(function() { $(".checkbox").prop("checked", $(this).prop("checked")); calculateTotalPrice(); }); // 单个商品复选框点击事件 $(".checkbox").click(function() { calculateTotalPrice(); }); // 计算总价 function calculateTotalPrice() { var totalPrice = 0; $(".checkbox:checked").each(function() { var price = parseInt($(this).next().text().split(" - ")[1]); totalPrice += price; }); $("#totalPrice").text(totalPrice); } }); </script> </body> </html> ``` 这个例子中，我们使用了jQuery来实现购物车的功能。每个商品都有一个复选框和对应的价格，用户可以通过勾选复选框来选择要购买的商品，同时总价会实时更新。点击全选按钮可以全选或取消全选。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值