JQuery点击按钮数字递增递减

梦里梦外; 2021-09-13 14:50 441阅读 0赞

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

![Center][]

<!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>

[Center]: /images/20210813/779d17027fe14879be5aff389d65f440.png