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 相关文章推荐
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 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数组是否为索引数组的实现方法
2013/06/13 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
python实现哈希表
2014/02/07 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
详解python中各种文件打开模式
2020/01/19 Python
10个示例带你掌握python中的元组
2020/11/23 Python
Python实现随机爬山算法
2021/01/29 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
《我要的是葫芦》教学反思
2014/02/23 职场文书
仓管员岗位职责
2015/02/03 职场文书
大学四年个人总结
2015/03/03 职场文书
学校德育工作总结2015
2015/05/11 职场文书
民事申诉状范本
2015/05/20 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技