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 相关文章推荐
javascript与webservice的通信实现代码
Dec 25 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
Vue性能优化的方法
Jul 30 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获取本周第一天和最后一天示例代码
2014/02/24 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
Python实现程序的单一实例用法分析
2015/06/03 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python如何实现视频转代码视频
2019/06/17 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
python的faker库用法
2019/11/28 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
python 读取二进制 显示图片案例
2020/04/24 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
巾帼文明岗申报材料
2014/05/01 职场文书
2016大学军训心得体会
2016/01/11 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
Vue h函数的使用详解
2022/02/18 Vue.js