首页 > 代码库 > jQuery实现购物车数字加减效果
jQuery实现购物车数字加减效果
效果图:
jQuery实现购物车数字加减效果,方法本简单。
经常会写到购物车这块,而购物车很多就有加减这个效果(可以将HTML代码复制多个,同时支持),小小的总结了一下,代码如下:
HTML:
<div class="gw_num"> <em class="jian">-</em> <input type="text" value="http://www.mamicode.com/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); });
});
jQuery实现购物车数字加减效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。