您现在的位置是:网站首页>>前端技术>>html+css+js

html+css+js 实现购物车输入框加减功能

发布时间:2019-04-30 18:14:44作者:wangjian浏览量:240点赞量:0

    最近有一个需求要实现购物车的输入框加减功能,对于我一个后端来说,真的是愁死了我,最后在花了一段时间后终于实现了,于是这里记录下(页面样式可忽略)

    <style>
        .gw_num{border: 1px solid #dbdbdb;width: 110px;line-height: 41px;overflow: hidden;}
        .gw_num strong{display: block;width: 25%;height: 45px; 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: 50%;font-style: normal;font-size: 14px;line-height: 40px;border: 0;}
        .gw_num strong.add{float: right;border-right: 0;border-left: 1px solid #dbdbdb;}
    </style>
    <div class="gw_num" >
    <strong class="jian">-</strong>
    <input class=" num" type="number" value="1"/>
    <strong class="add">+</strong>
    </div>
    <script>
        //加的效果
        $(document).on('click', '.add', function() {
            var n=$(this).prev().val();
            var num=parseInt(n)+1;
            if(num==0){
                return ;
            }
            //设置最大值
            surplus_num = 20;
            if (Number(surplus_num) < Number(num)) {
                return ;
            }
            $(this).prev().val(num);
        });
        //减的效果
        $(document).on('click', '.jian', function() {
            var n=$(this).next().val();
            var num=parseInt(n)-1;
            if(num==0){ return}
            $(this).next().val(num);
        });
    </script>

    现象如下:

    image.png

0 +1