jquery 修改购物车小计,添加加减功能

最新推荐文章于 2023-05-03 00:36:50 发布
最新推荐文章于 2023-05-03 00:36:50 发布
阅读量425 收藏 3
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44378358/article/details/108264029
版权

在这里插入图片描述

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

	<head>
		<meta charset="UTF-8">
		<title>我的购物车-品优购</title>
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/car.css">
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>

	<body>

		<div class="car-header">
			<div class="w">
				<div class="car-logo">
					<img src="img/logo.png" alt="">
					<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 check-cart-item">
							<div class="p-checkbox">
								<input type="checkbox" name="" id="" checked 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>
									<input type="text" class="itxt" value="1">
									<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">
									<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">
									<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>
				<!-- 结算模块 -->
				<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>1</em>件商品</div>
						<div class="price-sum">总价： <em>￥12.60</em></div>
						<div class="btn-area">去结算</div>
					</div>
				</div>
			</div>

		</div>

	</body>
	<script>
        $(function () {
            // 1. 全选 全不选功能模块
            // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
            // 事件可以使用change
            $(".checkall").change(function () {
                // console.log($(this).prop("checked"));
                $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
            });
            // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
            $(".j-checkbox").change(function () {
                // if(被选中的小的复选框的个数 === 3) {
                //     就要选中全选按钮
                // } else {
                //     不要选中全选按钮
                // }
                // console.log($(".j-checkbox:checked").length);
                // $(".j-checkbox").length 这个是所有的小复选框的个数
                if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
                    $(".checkall").prop("checked", true);
                } else {
                    $(".checkall").prop("checked", false);
                }
            });
            /*增减商品*/
            /*点击一个按钮,他的兄弟数值发生变化*/
            $('.increment').click(function () {
                var num = $(this).siblings('.itxt').val();
                console.log(num);
                num++;
                $(this).siblings('.itxt').val(num);
                /*修改小计*/
                var p = $(this).parent().parent().siblings('.p-price').html().substr(1);
                console.log(p)
                $(this).parent().parent().siblings('.p-sum').html('￥'+(p*num)   .toFixed(2))
            })
            $('.decrement').click(function () {
                var num = $(this).siblings('.itxt').val();
                console.log(num);
                if (num > 1)
                    num--;
                $(this).siblings('.itxt').val(num);
                /*修改小计*/
                var p = $(this).parent().parent().siblings('.p-price').html().substr(1);
                console.log(p)
                $(this).parent().parent().siblings('.p-sum').html('￥'+(p*num).toFixed(2))
            })
	        /*修改小计*/
        })
	</script>

</html>
黄大仙No.1
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery购物车修改商品小计
qq_43781887的博客
07-12 451
首先来看布局： 解释：左边部分是商品的单价，右边是根据中间商品数量算出来的总价格。核心思路：主要可以看这个博客：(1条消息) Jquery购物车增减商品数量模块_setTimeout()的博客-CSDN博客然后根据商品数量乘以左边的单价来给右边的总价格重新赋值，这里要注意，得到左边的值的时候需要把￥符号给去掉再乘以数量，以及最后右边的值需要保留两位小数，采用toFixed(2)方法。在这个之上还需要完善一个功能就是当用户修改商品数量的时候， 采用表单change事件即可。然后根据更改的值来改变总价格，最后
前端学习（1013）：购物车增减商品数量2-修改商品小计
歌谣的博客
05-01 468
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...
jQuery-修改商品小计
qq_39111074的博客
10-11 364
页面效果： 实现思路： 加元素绑定点击事件，事件处理程序- - - ① 改变数量：获取当前数量，点击后，数量加1， ② 改变小计：获取价格，获取文本值用text()，截取数字部分，例如：substr(1)；小计等于 价格 乘以 当前数量；再将计算出的数字赋值给小计，前面有非数字文字时，注意使用字符串连接后再赋值，例如：html(“￥” + p * num) 减元素绑定点击事件，事件处理程序- - - ① 改变数量：获取当前数量，点击后，数量减1；如果数量为1，不再继续减 ② 改变小计：获取价格，获取文本
前端学习（1014）：购物车增减商品数量2-修改商品小计parents
歌谣的博客
05-01 302
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...
jQuery 内容文本值|| 案例：购物车案例模块-增减商品数量 || 案例：购物车案例模块-修改商品小计
qq_39368007的博客
11-29 411
jQuery 内容文本值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
jQuery购物车商品数量加减合计代码.zip
09-26
《jQuery购物车商品数量加减合计代码》是一个实用的前端开发资源，主要涉及jQuery库的使用，以及在购物车场景中的应用。这个压缩包包含了实现该功能所需的所有基本元素，包括HTML页面结构、JavaScript逻辑、图像资源...
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
12-10
在本示例中，我们看到一个使用jQuery实现的简单购物车功能。该功能允许用户通过点击按钮增加或减少购物车内商品的数量，并实时更新总价。以下是关键知识点的详细说明： 1. **jQuery库的引入**：代码中引用了jQuery...
jQuery商品数量加减并计算总价代码
06-10
本文将详细介绍如何使用jQuery实现商品数量加减并计算总价的代码。 首先，我们需要一个HTML结构来展示商品信息和数量控制按钮。在`index.html`文件中，这可能包括以下元素： ```html 商品名称 ...
jQUery购物车加减计价与全选全不选
11-02
在这个"jQuery购物车加减计价与全选全不选"的主题中，我们将探讨如何利用jQuery来实现购物车的基本操作。 1. **商品添加与删除**： - 添加：当用户点击“加入购物车”按钮时，可以通过jQuery获取商品ID和数量，...
ecshop 购物车页添加购买数量加减按钮
05-22
"ecshop 购物车页添加购买数量加减按钮" 是一个针对ECSHOP电商平台的优化插件，旨在提升用户在购物车操作时的便利性。ECSHOP是一款流行的开源电子商务系统，它提供了一整套完善的在线购物解决方案。通过这个插件，...
jQuery实现PC端商城购物车模块基本功能（每个商品的小计和合计都会根据添加和删除的操作来动态计算）
01-08
jQuery实现PC端商城购物车模块基本功能 先上效果图： 因为主要是想练习jQuery的使用，所以页面CSS部分比较简陋，有需要的话，大家在参考代码时，可以自己再完善下CSS部分的代码，让购物车页面更加美观。 商品1 单价: ￥12.6 – + 小计: ￥0.00 删除 商品2 单价: ￥102.9 – + 小计: ￥0.00 删除 商品3 单价: ￥19.9
购物车案例模块-修改商品小计分析
weixin_45147894的博客
10-22 305
jQuery购物车 商品数量加减和小计
qq_50839755的博客
04-05 2745
整体代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .body{ width: 300px; height: 100px; border: 1px solid silver; } a{ text-decoration: none; }
用jQuery做一个简单的购物车
StartChong
11-02 3913
用jQuery做一个简单的购物车 前言： 之前用的JavaScript做的，现在结合jQuery再试一下。效果虽然差不多，但是对于了解和学习jQuery选择器还有事件等可以有一个更好的了解。 (img)自行准备 实现功能： 将商品添加到购物车（如果购物车有相同物品则累加对应数量） 小计计算与总和 积分计算与总和 实现数量的增加和减少（并同步小计和积分及其总和） 单个商品删除 批量删除 实现效果...
jQuery购物车模块复选框模块小计模块实现思路
weixin_51445507的博客
07-14 349
jQuery品优购购物车模块 全选复选框、小计模块实现思路
基于jQuery------购物车案例
m0_63064861的博客
05-03 1588
号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额。商品： 先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品。小的复选框点击： 如果是选中状态，则当前商品添加背景，否则移除背景。选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景。号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计。： 这个变量初始值应该是这个文本框的值，在这个值的基础上。： 只能增加本商品的小计， 就是当前商品的小计模块（核心思路：选中的商品添加背景，不选中移除背景即可。
JQuery初学:在购物车中小计商品价格
weixin_34261415的博客
04-14 199
repeater中有三个控件(两个Label,一个TextBox),两个Label分别用于显示单价和小计价格，TextBox用于让用户改变商品数量。 &lt;td &gt; &lt;%-- 商品单价--%&gt; &lt;asp:Label ID="price" runat="serve...
Jquery实现表单动态加减、ajax表单提交
dianding5728的博客
06-08 316
一直在搞Java后台开发，记得刚工作那一两年时间搞过前后端交互开发，用的东西也是五花八门，当时觉得做页面展示给别人看，是很有成就的事情，不过现在感觉自己跟纯前端开发比起来弱爆了，不过如果你的目标是作为一个全栈开发工程师，最起码各方面也拿的出手吧。 对于前端开发，我的归类是分2种层次，首先第一种是基于前端架构上的开发，有一些后台开发的同事会瞧不起搞前端的，他们认为前端无非是画个页面嘛，这...
jQuery：监听文本框数字变化实时计算价格，如：贷款=成交价-首付，贷款会随着成交价、首付任何一个值的变化而实时变化
weixin_44558497的博客
01-18 611
jQuery、zepto：监听文本框数字变化实时计算价格，如：贷款=成交价-首付，贷款会随着成交价、首付任何一个值的变化而实时变化 效果图： 1、html代码： （样式请自行调整） 代码复制区：//type=&quot;number&quot;起到限制文本框输入其他字符，只能输入数字。 成交价：&amp;lt;input type=&quot;number&quot; placeholder=&quot;请填写&quot; id=&a
jquery实现购物车基本功能
最新发布
06-20
jQuery 是一个流行的 JavaScript 框架，它简化了 HTML 文档遍历、事件处理、动画和Ajax交互等任务。使用 jQuery 实现购物车的基本功能，通常会涉及以下几个步骤： 1. **添加商品到购物车**: - 创建一个或多个HTML元素表示商品，包含名称、价格和“加入购物车”按钮。 - 给按钮添加点击事件，当点击时，使用$.ajax调用服务器端API将商品信息添加到购物车中。 ```javascript $(".add-to-cart").click(function() { var item = $(this).data("item"); $.ajax({ url: "add-to-cart.php", type: "POST", data: { item: item }, success: function(response) { // 更新购物车显示 }, error: function(xhr, status, error) { console.error(error); } }); }); ``` 2. **显示购物车内容**: - 可以通过查询服务器获取当前用户的购物车信息，并使用jQuery动态渲染到页面上。 ```javascript function fetchCart() { $.ajax({ url: "get-cart.php", success: function(cartItems) { $("#cart").html(cartItems); }, error: function(xhr, status, error) { console.error(error); } }); } // 初始加载购物车，或者在用户登录后刷新购物车数据 fetchCart(); ``` 3. **删除购物车中的商品**: - 为购物车列表中的每个商品项添加删除按钮，同样使用$.ajax发送请求到服务器。 ```javascript $(".delete-from-cart").click(function() { var itemId = $(this).data("itemId"); $.ajax({ url: "delete-item.php", type: "POST", data: { itemId: itemId }, success: function(response) { // 更新购物车显示 fetchCart(); }, error: function(xhr, status, error) { console.error(error); } }); }); ``` 4. **结算与计价**: - 需要计算购物车总价，可能需要实时更新或在用户完成购物车操作时执行。 ```javascript function calculateTotal() { var total = 0; $("#cart .item-price").each(function() { total += parseInt($(this).text()); }); $("#total-price").html(total); } // 在商品数量变化或添加/删除商品后更新总价格 $("#cart").on("change", ".item-quantity", function() { calculateTotal(); }); // 在用户添加商品或删除后重新计算 fetchCart().then(calculateTotal); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值