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 相关文章推荐
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 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 cc攻击代码与防范方法
2012/10/18 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
linux 下selenium chrome使用详解
2020/04/02 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
python实现逻辑回归的示例
2020/10/09 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
军训自我鉴定范文
2014/02/13 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
开业典礼主持词
2014/03/21 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
母亲节主题班会
2015/08/14 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python