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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
js生成随机数的方法实例
Oct 16 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
使用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简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
angularjs基础教程
2014/12/25 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
Vue中使用Sortable的示例代码
2018/04/07 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
将python图片转为二进制文本的实例
2019/01/24 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
置业顾问岗位职责
2014/03/02 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫