JQuery点击按钮数字递增递减

在很多电商网站中，在购物车所在页面，涉及到商品数量的时候，都会提供一个+号按钮和-号按钮来实现增1和减1，并且只允许input中输入数值。如下

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html,body,div,ul,li{margin: 0;padding: 0;
}
a{text-decoration: none;}
.addcount{width: 200px;margin:50px auto;
}
.addcount a{width: 20px;height: 24px;line-height: 24px;text-align: center;background: #ffa800;color: #fff;display: inline-block;
}
.addcount input{width: 50px;height: 20px;text-align: center;vertical-align: middle;
}
</style>
</head>
<body>
<div class="addcount"><a class="J_minus" href="javascript:;">-</a><input type="text" class="J_input" value="1"><a class="J_add" href="javascript:;">+</a>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){$('.addcount').each(function(){var _this=$(this);var add=$(_this).find(".J_add");//添加数量  var reduce=$(_this).find(".J_minus");//减少数量  var num=1;//数量初始值  var num_txt=$(_this).find(".J_input");//接受数量的文本框 $(add).click(function(){  num = $(num_txt).val();      num++;  num_txt.val(num);  //ajax代码可以放这里传递到数据库实时改变总价  });/*减少数量的方法*/   $(reduce).click(function(){  //如果文本框的值大于0才执行减去方法  num =  $(num_txt).val();  if(num >0){  //并且当文本框的值为1的时候，减去后文本框直接清空值，不显示0  if(num==1)  { num--;  num_txt.val("1");  }  //否则就执行减减方法  else  {  num--;  num_txt.val(num);  }  }  });        })
});
</script>
</body>
</html>

JQuery点击按钮数字递增递减相关推荐

jquery点击按钮显示和隐藏div
[转]jquery点击按钮显示和隐藏DIv 1 function changeDisplay() { 2 if ($("#btnShow").attr("value&qu ...
js 数字递增递减_js验证连续两位数字递增或递减和连续三位数字相同
验证 function isPassword(){//连续三位数字相同 var str = $("#testid").val(); //var patrn=/(.)*(.)\2{2 ...
js 数字递增递减_JavaScript如何实现数字递增特效
本篇教程介绍了JavaScript如何实现数字递增特效,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 第一: HTML部分这里简单列举一个小月博客上面 ...
jQuery 点击按钮刷新页面
//页面加载时绑定按钮点击事件$(function () {$("#按钮id").click(function () {refresh();});});//点击按钮调用的方法fun ...
js 数字递增递减_数字推理满分技巧！不是干货，请批我！
公众号:兼得公考数字推理不是广东的特色考点,但广东的数字推理是比较有"特色"的,他的特色就是简单,特别是2019年的数字推理.但我们不能因为某一两年考得简单而简单地学,为了让大家 ...
php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法
jQuery能够简单快捷的实现很多功能,因此在前端开发中被广泛使用,正在学习jQuery的小伙伴,你会用jQuery实现点击显示再次点击隐藏的效果吗(即jQuery二次点击隐藏)?这篇文章就和大家讲讲 ...
php 表单同步,Jquery点击按钮异步和同步提交表单
最近在开发一个jsp学生信息管理系统,由于刚刚接触jsp,遇到问题比较多,特此记录与大家分享. Jquery ajax提交表单到servlet示例前台部分代码: 姓名学号 ajax提交表 ...
jQuery点击按钮新增dom
在一个jQuery项目中,遇到了一个需求,即点击新增按钮进行新增一组输入框,点击删除删除一组输入框,如果是vue/react项目就可以很容易的去实现,也没有什么可以说的复杂操作,但是这是jQuery! ...
jquery点击按钮切换样式
实现点击两个按钮的切换 css: .fui-cell-info {display: flex;}.fui-cell-a {padding: 4px 18px;border: 1px solid #68 ...

JQuery点击按钮数字递增递减

JQuery点击按钮数字递增递减相关推荐

最新文章

热门文章

JQuery点击按钮 数字递增递减

JQuery点击按钮 数字递增递减相关推荐

最新文章

热门文章

JQuery点击按钮数字递增递减

JQuery点击按钮数字递增递减相关推荐