JQuery点击按钮数字递增递减

最新推荐文章于 2022-01-08 23:51:01 发布

面条请不要欺负汉堡

最新推荐文章于 2022-01-08 23:51:01 发布

阅读量7.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： JQuery点击按钮数字递增递减累计数字

本文链接：https://blog.youkuaiyun.com/gao_xu_520/article/details/75077791

jquery 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种在电商网站中实现购物车商品数量增减功能的方法，通过使用HTML、CSS和JavaScript创建了+和-按钮，使得用户能够方便地调整所选商品的数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在很多电商网站中，在购物车所在页面，涉及到商品数量的时候，都会提供一个+号按钮和-号按钮来实现增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>