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 幻灯片插件(带缩略图功能)
Jan 24 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
ElementUI多个子组件表单的校验管理实现
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获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php反射应用示例
2014/02/25 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
js中数组常用方法总结(推荐)
2019/04/09 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
python实现求最长回文子串长度
2018/01/22 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
python如何为创建大量实例节省内存
2018/03/20 Python
python实现周期方波信号频谱图
2018/07/21 Python
详解Django 时间与时区设置问题
2019/07/23 Python
Python pandas用法最全整理
2019/08/04 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
《自然之道》教学反思
2014/02/11 职场文书
六五普法规划实施方案
2014/03/21 职场文书
个人安全生产责任书
2014/07/28 职场文书