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 相关文章推荐
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 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使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python生成密码库功能示例
2017/05/23 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
python实现textrank关键词提取
2018/06/22 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
保洁公司服务承诺书
2014/05/28 职场文书
会计系毕业生求职信
2014/05/28 职场文书
离婚协议书范本
2015/01/26 职场文书
法院执行局工作总结
2015/08/11 职场文书
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python