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.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
详解vue中v-on事件监听指令的基本用法
Jul 22 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
2019十大人气国漫
2020/03/13 国漫
php删除左端与右端空格的方法
2014/11/29 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python类参数self使用示例
2014/02/17 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
python实现电脑自动关机
2018/06/20 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
python实现串口通信的示例代码
2020/02/10 Python
python算的上脚本语言吗
2020/06/22 Python
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
给分销商的致歉信
2014/01/14 职场文书
村干部培训班主持词
2014/03/28 职场文书
写给老师的保证书
2015/05/09 职场文书
实习证明格式范文
2015/06/16 职场文书
技术入股协议书
2016/03/22 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
Redis基本数据类型Set常用操作命令
2022/06/01 Redis