jQuery实现商城中要购买商品数量的加减

最新推荐文章于 2021-10-11 15:22:08 发布

chuojiandi3387

最新推荐文章于 2021-10-11 15:22:08 发布

阅读量516

点赞数 1

文章标签： javascript php ViewUI

原文链接：https://my.oschina.net/u/3421709/blog/1143075

版权

示例代码说明：

简单实现了商品详情、购物车等页面中，商品数量的加减，并限制数量>=1,当数量为1时,使商品数量固定为 1,

可以直接复制此代码到http://www.runoob.com/try/try.php?filename=tryjquery_hide这里替换掉原代码进行演示！

代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$(function(){
    //数量增加操作
    $(".add").click(function(){  
		//获得文本框对象
		var t=$(this).parent().find('input[class*=text_box]');
        t.val(parseInt(t.val())+1)
    }) 
    //数量减少操作
    $(".min").click(function(){
		//获得文本框对象
		var t=$(this).parent().find('input[class*=text_box]');
		//当数量为1时，固定商品数量为 1 不变 ； 其他情况，正常加减
		if (parseInt(t.val()) <= 1 ){
            t.val(1);
        }else{
        t.val(parseInt(t.val())-1);
		}
     })
   })
});
</script>  
</head>  
<body>  
  
<div class="sl">
<input class="min am-btn" name="" type="button" value="-" />
<input class="text_box" name="" type="text" value="1" style="width:30px;" />
<input class="add am-btn" name="" type="button" value="+" />
</div>
	
<div class="sl">
<input class="min am-btn" name="" type="button" value="-" />
<input class="text_box" name="" type="text" value="1" style="width:30px;" />
<input class="add am-btn" name="" type="button" value="+" />
</div>
	
</body>  
</html>

转载于:https://my.oschina.net/u/3421709/blog/1143075