Jquery仿美团外卖等食品选择页面购物车数量加减功能实现

先上图：

HTML部分：

<div class="left_box"><ul><li class="active">营养套餐</li><li>酒水饮料</li><li>酒水饮料</li><li>酒水饮料</li></ul></div><div class="right_box"><div style="padding:0 5px 25px;"><div class="pInfo"><dl><dt><h3>商务套餐</h3></dt><dd><a href="#"><img src="/images/c01.jpg" /></a></dd><dd><em class="sale"><b>特价</b>0.01元/份<br /><del>15元/份</del></em></dd><dd class="btn"><button class="minus"><strong></strong></button><i>0</i><button class="add"><strong></strong></button><i class="price">0.01</i></dd></dl><dl><dt><h3>商务套餐</h3></dt><dd><a href="#"><img src="/images/c01.jpg" /></a></dd><dd><em class="sale"><b>特价</b>0.01元/份<br /><del>15元/份</del></em></dd><dd class="btn"><button class="minus"><strong></strong></button><i>0</i><button class="add"><strong></strong></button><i class="price">8</i></dd></dl><dl><dt><h3>商务套餐</h3></dt><dd><a href="#"><img src="/images/c01.jpg" /></a></dd><dd><em class="sale"><b>特价</b>0.01元/份<br /><del>15元/份</del></em></dd><dd class="btn"><button class="minus"><strong></strong></button><i>0</i><button class="add"><strong></strong></button><i class="price">15.0</i></dd></dl></div></div></div><div class="clearfix"></div>
</div>
<div class="footer"><div class="left">已选：<span id="cartN"><span id="totalcountshow">0</span>份　总计：￥<span id="totalpriceshow">0</span></span>元</div><div class="right"><a id="btnselect" class="xhlbtn  disable" href="javascript:void(0)" οnclick="btnSelectJump();">选好了</a></div>
</div>

JS部分：

$(document).ready(function () {//加的效果$(".add").click(function () {$(this).prevAll().css("display", "inline-block");var n = $(this).prev().text();var num = parseInt(n) + 1;if (num == 0) { return; }$(this).prev().text(num);var danjia = $(this).next().text();//获取单价var a = $("#totalpriceshow").html();//获取当前所选总价$("#totalpriceshow").html((a * 1 + danjia * 1).toFixed(2));//计算当前所选总价var nm = $("#totalcountshow").html();//获取数量$("#totalcountshow").html(nm*1+1);jss();//改变按钮样式
});//减的效果$(".minus").click(function () {var n = $(this).next().text();var num = parseInt(n) - 1;$(this).next().text(num);//减1var danjia = $(this).nextAll(".price").text();//获取单价var a = $("#totalpriceshow").html();//获取当前所选总价$("#totalpriceshow").html((a * 1 - danjia * 1).toFixed(2));//计算当前所选总价var nm = $("#totalcountshow").html();//获取数量$("#totalcountshow").html(nm * 1 - 1);//如果数量小于或等于0则隐藏减号和数量if (num <= 0) {$(this).next().css("display", "none");$(this).css("display", "none");jss();//改变按钮样式return}});function jss() {var m = $("#totalcountshow").html();if (m > 0) {$(".right").find("a").removeClass("disable");} else {$(".right").find("a").addClass("disable");}}});

CSS:

.left_box{width:22%;float:left;background-color:#eee;position:relative;height:100%;}
.left_box ul{padding:0;margin:0;}
.left_box ul li{line-height:60px;font-size:14px;padding:3px 0;padding-right:15px;text-align:right;color:#333;border-bottom:1px dashed #ddd;}
.left_box ul li.active{color:#f34b3f !important;background-color:#fff;}
.right_box {width:78%;float:left;margin:0;overflow-y:scroll;background:#fff;position:relative;min-height:500px;}.pInfo{padding:5px;}
.pInfo dl{position:relative;padding-left:60px;height:75px;border-bottom:1px solid #e7eaeb;border-top:1px solid #fff;padding-bottom:8px;margin-bottom:2px;}
.pInfo dl dt h3{font-size:14px;margin-bottom:10px;margin-top:8px;}
.pInfo dl dd{margin-left:0;font-size:11px;position:relative;z-index:1;}
.pInfo dl dd img{height:55px;width:55px;position:absolute;left:-60px;top:-25px;border-radius:3px;cursor:pointer;vertical-align:middle;border:0;}
.pInfo dl dd em{font-style:normal;line-height:10px;font-size:11px;vertical-align:bottom;}
.pInfo dl dd em.sale{color:#f00;}
.pInfo dl dd del{color:#b2b2b2;font-size:10px;line-height:22px;}
.pInfo dl dd.btn{background-color:transparent;position:absolute;right:-5px;top:25%;cursor:pointer;padding:3px;height:38px;}
.pInfo dl dd.btn button.minus{margin-right:-10px;display:none;}
.pInfo dl dd.btn button{width:40px;height:40px;border:0;background:transparent;padding:0;}
.pInfo dl dd.btn button strong{padding:5px 10px;font-size:15px;display:inline-block;text-indent:-100px;padding:5px 11px;height:12px;}
.pInfo dl dd.btn button.minus strong{background:url(/images/jianhao.png) no-repeat;background-size:22px 22px;}
.pInfo dl dd.btn i{display:none;width:22px;text-align:center;font-style:normal;vertical-align:top;margin-top:11px;line-height:18px;}.pInfo dl dd.btn button.add{margin-left:-10px;}
.pInfo dl dd.btn button.add strong{background:url(/images/jiahao.png) no-repeat;background-size:22px 22px;}
.pInfo dl dd.btn .price{display:none;}.footer{display:block;position:fixed;padding:5px 0;width:100%;z-index:3;bottom:0px;color:#f03c03;background:#fff;line-height:35px;font-size:15px;border-top:1px solid #e2e2e2;}
.footer .left{float:left;margin-left:10px;}
.footer .right{float:right;margin-right:10px;}
.footer .right .disable{background:#dbdbdb;}
.footer .xhlbtn{display:block;text-align:center;background-color:#F03C03;padding:0 15px;border-radius:20px;color:#fff;font-weight:bold;}

Jquery仿美团外卖等食品选择页面购物车数量加减功能实现相关推荐

Vue开发的仿美团外卖Html5前端页面
今天给大家开源一个仿美团外卖的Vue项目,介绍Vue和vue-router的基本用法. 工程结构工程目录结构比较简单,如下图所示. 运行效果部分运行效果如下图,实现了基本的页面切换,导航菜单,购物 ...
android仿美团外卖选择地址,Android仿美团地址选择
最近做了这个功能,分享一下,用的是百度地图api,和美团外卖的地址选择界面差不多,也就是可以搜索或者滑动地图展示地址列表给用户选择,看下效果图先. addressSelect.gif 文章重点 1.展 ...
基于Android的仿美团外卖系统设计与实现文档+源码+视频
基于Android的仿美团外卖系统设计与实现演示视频摘要为了巩固所学 Android 基础知识,要开发一款仿美团外卖的项目,该项目与我们平常看到的美团外卖项目界面比较类似,展示的内容包括店铺. ...
Android 高仿美团外卖详情页
目录 1.需求分析 2.具体实现 2.1效果展示 2.2布局分析 2.3代码分析 2.3.1自定义 CoordinatorLayout.Behavior 2.3.2自定义 RecyclerView.I ...
【uniapp前端组件】仿美团外卖商品列表
仿美团外卖商品列表简易实现美团外卖商品列表,没什么技术难点,简单来说就是两个scroll-view协作,并且两个scroll-view不会滑动冲突. 实际效果仿美团外卖商品列表实际项目效果简介 ...
iOS高仿美团外卖店铺主页
高仿美团外卖的店铺主页(包括下拉动画效果,解决各种手势问题,并且cell有列表样式,九宫格样式,卡片样式),各种动画效果纵享丝滑,因为写的比较急,还待优化.! 解决UIScrollView嵌套UISc ...
CH12-综合项目—仿美团外卖
文章目录目标一.项目分析目标项目概述开发环境模块说明二.效果展示目标店铺界面店铺详情界面店铺详情界面确认清空购物车的对话框菜品详情界面订单界面和支付界面三.服务器数据准备 ...
进云仿美团外卖平台 v1.39源码
简介: 进云仿美团外卖源码是一个进云源生插件,支持多商户+多样化配送费模式+本土外卖平台+支持第三方配送,运行需要进云框架支撑! 特点: 1.多样化配送费模式: 2.板块-绑定商户分类机制: 3.板块 ...
Android Studio初学者实例：Fragment学习--仿美团外卖界面
本次课程为Fragment为主题,课程的示例仿美团外卖界面,不同于底部导航栏的Fragment案例,此界面分为左侧切换与顶部切换.本文先是发布代码与效果,后续讲解将会在后续补充.先看看效果: 首先是布 ...

Jquery仿美团外卖等食品选择页面购物车数量加减功能实现

Jquery仿美团外卖等食品选择页面购物车数量加减功能实现相关推荐

最新文章

热门文章