jQuery实现移动端手机商城购物车功能


Posted in Javascript onSeptember 24, 2016

购物车数量加减

右加号

$(".jiahao").click(function() {
var t = $(this).siblings().find("input");//取到数量
t.val(parseInt(t.val()) + 1);//parseInt()解析input一个字符串,返回一个整数
heji();//调用后面计算的函数
})

左减号

$(".jianhao").click(function() {
var t = $(this).siblings().find("input");
t.val(parseInt(t.val()) - 1);
//当数量小于1的时候让最小值等于1
if(parseInt(t.val()) < 1) {
t.val(1)
};
heji();
})

计算商品总价

function heji() {
$(".gwcar").each(function() {//循环整个购物车
var oprice = ; //商品总价
$(this).find(".glist").each(function() {//循环购物车里的每个商品,this值得是这个购物车
if($(this).find(".btn").hasClass("option") == true) {//判断商品被选中的情况下,this指的是购物车的三个商品
var num = $(this).find(".shuliang").val();//取到数量,this指的还是购物车的商品一个
var danjia = $(this).find(".danjia").text();
var xiaoji = num * danjia; //商品小计
oprice += xiaoji;
$(".zongjia").html(oprice);
};
});
});
};

最后附图一张

jQuery实现移动端手机商城购物车功能

以上所述是小编给大家介绍的jQuery实现移动端手机商城购物车功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的图片懒加载js
Jun 30 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
JavaScript函数柯里化
Nov 07 Javascript
AngularJS实现星星等级评分功能
Sep 24 #Javascript
完美的js div拖拽实例代码
Sep 24 #Javascript
javascript 解决浏览器不支持的问题
Sep 24 #Javascript
JavaScript生成验证码并实现验证功能
Sep 24 #Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 #Javascript
javascript 分号总结及详细介绍
Sep 24 #Javascript
Bootstrap对话框使用实例讲解
Sep 24 #Javascript
You might like
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
Python selenium如何设置等待时间
2016/09/15 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
python如何处理程序无法打开
2020/06/16 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
学习保证书范文
2014/04/30 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
六一儿童节致辞
2015/07/31 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
python单元测试之pytest的使用
2021/06/07 Python
详解Python中下划线的5种含义
2021/07/15 Python
Python办公自动化PPT批量转换操作
2021/09/15 Python
vue3获取当前路由地址
2022/02/18 Vue.js