jQuery实现购物车数字加减效果

Posted 2020-09-08 石头同学

效果图:

jQuery实现购物车数字加减效果，方法本简单。

经常会写到购物车这块，而购物车很多就有加减这个效果（可以将html代码复制多个，同时支持），小小的总结了一下，代码如下：

HTML:

<div class="gw_num">
   <em class="jian">-</em>
   <input type="text" value="1" class="num"/>
   <em class="add">+</em>
</div>

 css:

.gw_num{border: 1px solid #dbdbdb;width: 110px;line-height: 26px;overflow: hidden;}
.gw_num em{display: block;height: 26px;width: 26px;float: left;color: #7A7979;border-right: 1px solid #dbdbdb;text-align: center;cursor: pointer;}
.gw_num .num{display: block;float: left;text-align: center;width: 52px;font-style: normal;font-size: 14px;line-height: 24px;border: 0;}
.gw_num em.add{float: right;border-right: 0;border-left: 1px solid #dbdbdb;}

 jQuery:

$(document).ready(function(){
 //加的效果
 $(".add").click(function(){
   var n=$(this).prev().val();
   var num=parseInt(n)+1;
   if(num==0){ return;}
      $(this).prev().val(num);
 });
 //减的效果
 $(".jian").click(function(){
   var n=$(this).next().val();
   var num=parseInt(n)-1;
   if(num==0){ return}
   $(this).next().val(num);
  });
});