仿购物车加减数字

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;font-style:normal;}
.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;}

js:

$(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);
     });
})

效果如下:
这里写图片描述

posted on 2017-11-01 17:10  淡水无华  阅读(132)  评论(0编辑  收藏  举报