jquery实现购物车数量加减，价格计算功能

最新推荐文章于 2022-07-12 16:44:57 发布
最新推荐文章于 2022-07-12 16:44:57 发布
阅读量1k 收藏 1
点赞数
文章标签： javascript 数据库 ViewUI
原文链接：https://yq.aliyun.com/articles/553991
版权

HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < meta  name = "viewport"  content = "width=device-width, initial-scale=1" >
     < meta  http-equiv = "X-UA-Compatible"  content = "IE=edge" >
     < meta  name = "renderer"  content = "webkit" >
     < title >A03号桌</ title >
     < link  rel = "stylesheet"  href = "resources/css/main.css" >
</ head >
< body >
     <!--购物车-->
     < div  class = "shopCart" > 
     <!--可以在table外面套一个div写死宽高并设置overflow-y:scroll;，出现大量内容时，让table纵向滚动-->
        < div  class = "cartBox" > 
             < table  class = "cart" >
                 < thead >
                 < tr >
                     < th >菜品名称</ th >
                     < th >数量</ th >
                     < th >单价</ th >
                     < th >价格</ th >
                 </ tr >
                 </ thead >
                 < tbody >
                 < tr >
                     < td >大闸蟹</ td >
                     < td >
                         < button  class = "add" >+</ button >
                         < span  class = "count" >1</ span >
                         < button  class = "reduce" >-</ button >
                     </ td >
                     < td >
                         ￥< span  class = "price" >68.00</ span >
                     </ td >
                     < td >
                         ￥< span  class = "sub_total" >68.00</ span >
                     </ td >
                 </ tr >
                 < tr >
                     < td >在天愿作比翼鸟</ td >
                     < td >
                         < button  class = "add" >+</ button >
                         < span  class = "count" >1</ span >
                         < button  class = "reduce" >-</ button >
                     </ td >
                     < td >
                         ￥< span  class = "price" >68.00</ span >
                     </ td >
                     < td >
                         ￥< span  class = "sub_total" >68.00</ span >
                     </ td >
                 </ tr >
                 < tr >
                     < td >红嘴绿鹦哥</ td >
                     < td >
                         < button  class = "add" >+</ button >
                         < span  class = "count" >1</ span >
                         < button  class = "reduce" >-</ button >
                     </ td >
                     < td >
                         ￥< span  class = "price" >68.00</ span >
                     </ td >
                     < td >
                         ￥< span  class = "sub_total" >68.00</ span >
                     </ td >
                 </ tr >
                 </ tbody >
             </ table >
         </ div >
 
         < ul  class = "totalInfo clearfix" >
             < li >
                 < span  class = "total" >
                 合计：< i >￥</ i >< b >242.00</ b >
                 </ span >
             </ li >
             < li >
                 < button  class = "btn-save" >保存</ button >
             </ li >
         </ ul >
     </ div >
 
 
< script  src = "resources/js/jquery-1.8.3.min.js" ></ script >
< script  src = "resources/js/shopCart.js" ></ script >
</ body >
</ html >


JS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/****点击增加按钮****/
$( '.add' ).click( function (){
     //修改数量
     var  n=$( this ).next().html();
     var  num=parseInt(n)+1;
     $( this ).next().html(num);
     //计算价格
     var  c= $( this ).parent().siblings().children( '.price' ).html();
     parseInt(c);
     var  subPrice = num * c;
     var  sub_price = subPrice.toFixed(2);  //保留小数点后面两位小数
     $( this ).parent().siblings().children( '.sub_total' ).html(sub_price);
 
     //计算总价
     var  total=0;
     $( '.sub_total' ).each( function (){
         var  price=parseInt($( this ).html());
         total+=price;
         var  total_price = total.toFixed(2);
         $( '.total b' ).html(total_price);
     });
});
 
 
/****点击减少按钮****/
$( '.reduce' ).click( function (){
     //修改数量
     var  n=$( this ).prev().html();
     var  num=parseInt(n)-1;
     if (num==0){ return ;} //数量减到0就能再减了
     $( this ).prev().html(num);
 
     //计算价格
     var  c= $( this ).parent().siblings().children( '.price' ).html();
     parseInt(c);
     var  subPrice = num * c;
     subPrice.toFixed(2);
     var  sub_price = subPrice.toFixed(2);
     $( this ).parent().siblings().children( '.sub_total' ).html(sub_price);
 
     //计算总价
     var  total=0;
     $( '.sub_total' ).each( function (){
         var  price=parseInt($( this ).html());
         total+=price;
         var  total_price = total.toFixed(2);
         $( '.total b' ).html(total_price);
     });
});


考虑到篇幅问题，没有贴出CSS代码，最终页面截图如下：

wKioL1gIYA6g7MTbAAEULD6Wu_A791.png

本文转自   frwupeng517   51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1863852

weixin_34318272
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过jquery实现购物车的全选加减以及计算总价
weixin_52153452的博客
12-15 1853
通过jquery实现购物车的全选加减以及计算总价
WebApi实战案例-购物车加减
weixin_45650436的博客
12-13 514
<style> div { width: 80px; } input[type='text'] { width: 50px; height: 44px; outline: none; border: 1px solid #ccc; text-align: center; border-right: 0; } input[type='button'] { h.
Jquery购物车增减商品数量模块
qq_43781887的博客
07-12 983
首先看布局：需要实现的功能：点击右边+的时候文本框中数量+1，点击左边-的时候文本框中数量-1，当减到0的时候就不能再减了，以免显示负数。 实现思路： 1.需要声明一个变量，这个变量的值为文本框中的值，作为初始值，点击+就让这个值++，点击-就让这个值--，然后赋值给文本框。2.注意1:只能增加本商品的数量，原因是因为如果不止上面一个模块，而是很多个这个模块获取文本框中的值可能会获取到其他模块中文本框的值，所以取的值是当前+（-）号的兄弟文本框（itxt）的值。3.修改表单的值是采用val()方法。完整代码
jQuery实现购物车物品数量的加减
Tang
07-09 1万+
实现购物车物品数量的加减，最小值为1，当最小值为1时再按减少，减少按钮不可编辑，当按增加数量时恢复减少按钮状态。这个除了加减功能外，也可以自动计算价格。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&...
JQuery实现购物车数量加减总价累加
跟派大星学编程
08-04 1万+
jQuery实现购物车多物品数量的加减+总价计算 $(function(){ $(".add").click(function(){ var t = $(this).parent().find('input[class*=text_box]'); t.val(parseInt(t.val())+1); setTotal(); }) $(".min").click(fu
jq简单实现购物车加减功能
qq_43588387的博客
01-13 1107
<style> .num-input { height: 30px; } .num-input button { width: 22px; height: 100%; } .num-input input { width: 35px; height: 100%; text-align: center; } // 去除input number类型时自带的上下箭头 .num-input input::-webkit-outer-spin-button, .num-input.
jQuery购物车数量加减，计算金额
qq_54000867的博客
12-01 1164
<table border="1" cellspacing="0"> <tr> <td><input type="checkbox" id="allCheck" />全选</td> <td>项目</td> <td>状态</td> <td>类型/数量</td> <td class="text">单价</td>.
【jquery】实现购物车加减
sanqianjia的博客
11-30 768
分析： 1.点击“+”或者“-”时当前兄弟文本框中的数值变化 2.文本框最小值为1，所以点击“-”时需要进行判断 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&
jQuery实现购物车多物品数量的加减+总价计算
10-25
在本示例中，我们将探讨如何使用jQuery实现购物车中多物品数量的加减操作，并实时计算购物车的总价。这有助于提升用户体验，因为用户可以看到每次操作后总价的变化。 首先，我们看到HTML结构包含一个表格（`<table>...
购物车H5前端页面，带前计算端逻辑
07-25
购物车H5前端页面，带前计算端逻辑，实现前端展示类的全选、单选、数量加减，滑动删除展示，计算总价，小计等功能
jQuery商品数量加减并计算总价代码
06-10
jQuery商品数量加减并计算总价代码是一款类似商城增加减少商品件数特效，也可以在文本框直接输入数值，随着数量的改变计算出总价。
输入数量和价格自动计算输出金额的js代码
12-03
数量: 单价: 总价: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
购物车 商品结算
09-06
封装不错的购物车，全选和取消全选操作，商品数量的加减操作，根据商品数量的变化，总价发生改变。
jQuery实现的购物车物品数量加减功能代码
01-19
本文实例讲述了jQuery实现的购物车物品数量加减功能。分享给大家供大家参考，具体如下： 今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我，我后来帮她解决了这个Jquery特效，现在把它整理...
jquery实现文本框数量加减功能的例子分享
10-25
2. **数量加减**： - 定义两个函数`numAdd`和`numDec`分别处理商品数量的增加和减少。 - `numAdd`函数中，获取当前文本框的值，将其转换为整数并加1，然后更新文本框和总价。 - `numDec`函数中，同样获取当前值并...
js实现购物车加减和价格运算
热门推荐
qq_39879340的博客
09-23 3万+
主要实现功能：购物车的加减，单件商品价格的运算，总价格的运算。价格保留两位小数。 <div class="content"> <div class="logo"> <img src="images/dd_logo.jpg"><span onclick="guan()">关闭</span> </div> <div class="cartList" id="zo
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、付费专栏及课程。

余额充值