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 Tabs插件宿主IFRAMES
Jan 01 Javascript
Javascript 面向对象 重载
May 13 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
修改Vue打包后的默认文件名操作
Aug 12 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
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
Python协程的用法和例子详解
2017/09/09 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
Python新手如何理解循环加载模块
2020/05/29 Python
Python中zip函数如何使用
2020/06/04 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
params有什么用
2016/03/01 面试题
幼儿园国庆节活动方案
2014/02/01 职场文书
网络信息安全承诺书
2014/03/26 职场文书
维稳工作承诺书
2015/01/20 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
项目安全员岗位职责
2015/02/15 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
Nginx配置使用详解
2022/07/07 Servers