jQuery实现的购物车物品数量加减功能代码


Posted in Javascript onNovember 16, 2016

本文实例讲述了jQuery实现的购物车物品数量加减功能。分享给大家供大家参考,具体如下:

今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用。

主要包括了以下功能:

1、数量增加操作功能

2、数量减少操作功能

3、总价计算功能

4、自动判断数量到1的时候,减少操作按钮禁止点击,数量增加时自动恢复

5、保留小数点位数toFixed()函数非常实用

功能代码如下:

$(function(){
//获得文本框对象
var t = $("#text_box");
//数量增加操作
$("#add").click(function(){
t.val(parseInt(t.val())+1)
if (parseInt(t.val())!=1){
$('#min').attr('disabled',false);
}
setTotal();
})
//数量减少操作
$("#min").click(function(){
t.val(parseInt(t.val())-1);
if (parseInt(t.val())==1){
$('#min').attr('disabled',true);
}
setTotal();
})
//计算操作
function setTotal(){
$("#total").html((parseInt(t.val())*3.95).toFixed(2));//toFixed()是保留小数点的函数很实用哦
}
//初始化
setTotal();
})

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery bind事件使用详解
May 05 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 #Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 #Javascript
微信小程序 获取相册照片实例详解
Nov 16 #Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 #Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 #Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 #Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 #Javascript
You might like
PHP伪静态页面函数附使用方法
2008/06/20 PHP
php 数组二分法查找函数代码
2010/02/16 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
php加密解密字符串示例
2016/10/13 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
Angular实现form自动布局
2016/01/28 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
node跨域请求方法小结
2017/08/25 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
在Python中使用SQLite的简单教程
2015/04/29 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
python创建学生成绩管理系统
2019/11/22 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
python复合条件下的字典排序
2020/12/18 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫