JQuery实现点击选加减按钮数字递增或递减也能直接输入数字提交的方法
在很多电商类型网站中，在购物车所在页面，涉及到商品数量的时候，都会提供一个+号按钮和-号按钮来实现增1和减1，并且只允许input中输入数值。
实现代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <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="../js/jquery-1.11.3.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> 
原文链接：https://www.qiquanji.com/post/8909.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知