购物车增减数量（两种方法，一简一易哦），后台更喜欢第二种哦，因为有手动修改购买数量的相关提示...

2019独角兽企业重金招聘Python工程师标准>>>

方法一：

css

.huise{background: red;}
.bh{position: absolute;right: 0; -webkit-box-pack:center;-webkit-box-align: center; }
.bh input{width:1.5rem; height:1rem; text-align: center;}
.bh i{color: #a4a4a4; width: 1rem; height:.8rem; font-size: 1.3em;  padding:.2rem;
 border:1px solid #a4a4a4;text-align: center;}

html

<div class="bh">
    <i class="icon-jianhao" id="desc"></i>
    <input type="text" value="1" id="num">
    <i class="icon-add" id="asc"></i>
</div>

js

<script src="jquery-1.11.0.min.js"></script>
<script>
    $(function(){
        if($("#num").val()==1)
            $("#desc").addClass('huise');
        var num = $("#num");
        var desc = $("#desc");
        var asc = $("#asc");
        asc.click(function(){
            var i = parseInt(num.val()+"");
            num.val(i+1);
            $("#desc").removeClass('huise');
        })
        desc.click(function(){
            var i = parseInt(num.val());
            if(i==2)
                $("#desc").addClass('huise');
            if (i<=1){
                num.val(1);
            }
            else{
                num.val(i-1);
            }
        })
    })
</script>

 

方法二：

css

.detial_xk{width:100%;overflow:hidden;line-height:3rem;color:#333}
.detial_buy_num_val span.num_add
,.detial_buy_num_val span.num_add1
,.detial_buy_num_val span.num_minus
,.detial_buy_num_val span.num_minus1{width:2.8rem;height:2.8rem}
.detial_buy_num_val span.num_minus1{background:#f9f9f9 url(../images/num_minus1.png) 
no-repeat center;background-size:1.2rem 1.2rem}
.detial_buy_num_val span.num_minus{background:#fff url(../images/num_minus.png) 
no-repeat center;background-size:12px 12px}
.detial_buy_num_val span.num_add{background:#fff url(../images/num_add.png) 
no-repeat center;background-size:1.2rem 1.2rem}
.detial_buy_num_val span{display:block;float:left;text-align:center}
.bor_a{border:1px solid}
.bor_b{border-bottom:1px solid}
.bor_t{border-top:1px solid}
.b_gray1{border-color:#ccc}
.b_gray{border-color:#ddd}
.num_text input{width:4rem;height:2.8rem; line-height:2.8rem;padding:0;border:none;
background:0 0;outline:0;text-align:center;color:#fe4250}

html

<div class="clearfix">
    <div class=" fl detial_xk">购买数量</div>
    <div class="detial_buy_num_val">
        <span class="bor_a num_minus b_gray1" id="product_minus_num"></span>
        <span class="num_text bor_t bor_b b_gray1">
            <input type="text"  value="1" maxlength="3" 
            id="product_buy_num" name="product_buy_num">
        </span>
        <span class="num_add b_gray1 bor_a c_gray2" id="product_add_num"></span></div>
</div>

js

<script src="jquery-1.11.0.min.js"></script>
<script>
    /*购买数量减*/
    var buy_num = Number($('#product_buy_num').val());
    $("#product_minus_num").click(function () {
        if (buy_num <= 1) {
            $(this).removeClass('b_gray1 c_gray2 num_minus').addClass('num_minus1 b_gray');
            return;
        } else {
            buy_num--;
            $('#product_buy_num').val(buy_num);
            if (buy_num <= 1) {
                $(this).removeClass('b_gray1 c_gray2 num_minus').addClass('num_minus1 b_gray');
                $('#product_add_num').removeClass('num_add1 b_gray').addClass('b_gray1 c_gray2 num_add');
                return;
            }
        }
    });


    /*购买数量加*/
    $("#product_add_num").click(function () {
        if (buy_num < 999) {
            buy_num++;
            $('#product_buy_num').val(buy_num);
        }
        if (buy_num > 1) {
            $(this).removeClass('num_add1 b_gray').addClass('b_gray1 c_gray2 num_add');
            $('#product_minus_num').removeClass('b_gray c_gray2 num_minus1').addClass('num_minus b_gray1');
        }
    });

    /*手动修改购买数量*/
    $("input#product_buy_num").keyup(function () {
        buy_num = $('#product_buy_num').val();
        if (isNaN(buy_num)) {
            alert("您输入有误，请重新输入！");
        } else {
            if (parseInt(buy_num) < 1) {
                alert('此商品至少购买一件');
                $('#product_buy_num').val('1');
                $('#product_minus_num').removeClass('b_gray1 c_gray2 num_minus').addClass('num_minus1 b_gray');
                $('#product_add_num').removeClass('num_add1 b_gray').addClass('b_gray1 c_gray2 num_add');
            } else {
                $('#product_add_num').removeClass('num_add1 b_gray').addClass('b_gray1 c_gray2 num_add');
                $('#product_minus_num').removeClass('b_gray c_gray2 num_minus1').addClass('num_minus b_gray1');
            }
        }

    });

    $(function () {
        $('.div_nav li a').click(function () {
            var liindex = $('.div_nav li a').index(this);
            $(this).addClass('on').parent().siblings().children().removeClass('on');
            $('.div_sections  section').eq(liindex).addClass('on').siblings().removeClass('on');

        });
    });
</script>

最后一段是tab切换，可以不用。删除

//本文来源于网络，本人总结起来并优化，分享给有需要的前端朋友，如有侵权，请联系删除，也请指正、批评

转载于:https://my.oschina.net/parchments/blog/655512