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实现自动完成功能(详解)
Jul 13 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
使用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 程序授权验证开发思路
2009/07/09 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
python定时器使用示例分享
2014/02/16 Python
python自定义异常实例详解
2017/07/11 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
python安装pil库方法及代码
2019/06/25 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
python学生管理系统的实现
2020/04/05 Python
Python接口测试文件上传实例解析
2020/05/22 Python
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
2014年国培研修感言
2014/03/09 职场文书
四议两公开实施方案
2014/03/28 职场文书
公开承诺书格式
2014/05/21 职场文书
销售辞职信范文
2015/03/02 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA