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 日期常用的方法
Nov 11 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
package.json各个属性说明详解
Mar 11 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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
window.open的功能全解析
2006/10/10 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
python执行精确的小数计算方法
2019/01/21 Python
python调用接口的4种方式代码实例
2019/11/19 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
酒店拾金不昧表扬信
2014/01/18 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
公司离职证明标准格式
2014/11/18 职场文书
继承公证书格式
2015/01/26 职场文书
社区节水倡议书
2015/04/29 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书