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 事件记录使用说明
Oct 20 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
vue实现分页加载效果
Dec 24 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 面向对象 PHP5 中的常量
2010/05/05 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
js倒计时小程序
2013/11/05 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
python中xrange和range的区别
2014/05/13 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
tensorflow 查看梯度方式
2020/02/04 Python
如何使用Pytorch搭建模型
2020/10/26 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
银行个人求职自荐信范文
2013/12/16 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
会计实训总结范文
2015/08/03 职场文书