jQuery快速实现商品数量加减的方法


Posted in Javascript onFebruary 06, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!-- 快速实现数量加减 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
//获得文本框对象
var t = $("#text_box");
//初始化数量为1,并失效减
$('#min').attr('disabled',true);
 //数量增加操作
 $("#add").click(function(){ 
  // 给获取的val加上绝对值,避免出现负数
  t.val(Math.abs(parseInt(t.val()))+1);
  if (parseInt(t.val())!=1){
  $('#min').attr('disabled',false);
  };
 }) 
 //数量减少操作
 $("#min").click(function(){
 t.val(Math.abs(parseInt(t.val()))-1);
 if (parseInt(t.val())==1){
 $('#min').attr('disabled',true);
 };
 })
});
</script> 
</head> 
<body> 
<input id="min" name="" type="button" value="-" /> 
<input id="text_box" name="" type="text" value="1" style="width:30px;text-align: center"/> 
<input id="add" name="" type="button" value="+" /> 
</body> 
</html>

实现数量加减,就是这么简单!

以上所述是小编给大家介绍的jQuery快速实现商品数量加减的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
js实现返回顶部效果
Mar 10 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
详解vuex的简单使用
Mar 12 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
js实现简单点赞操作
Mar 17 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 #Javascript
jQuery内容筛选选择器实例代码
Feb 06 #Javascript
jQuery基本筛选选择器实例代码
Feb 06 #Javascript
jQuery层级选择器实例代码
Feb 06 #Javascript
jQuery元素选择器实例代码
Feb 06 #Javascript
对称加密与非对称加密优缺点详解
Feb 06 #Javascript
jquery实现input框获取焦点的方法
Feb 06 #Javascript
You might like
PHP 可阅读随机字符串代码
2010/05/26 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
Js中sort()方法的用法
2006/11/04 Javascript
js文字滚动停顿效果代码
2008/06/28 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
python操作redis方法总结
2018/06/06 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
django的model操作汇整详解
2019/07/26 Python
Python实现点云投影到平面显示
2020/01/18 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
导致python中import错误的原因是什么
2020/07/01 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
装潢设计专业推荐信模板
2013/11/26 职场文书
大一期末自我鉴定
2013/12/13 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年副班长工作总结
2014/12/10 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
Python中的嵌套循环详情
2022/03/23 Python