数量加1 减 1 发现使用的地方挺多的,备份一下.

本文链接：https://blog.youkuaiyun.com/phker/article/details/49661207

本文介绍了一种简单的数量增减控件实现方法，通过HTML、CSS和JavaScript结合使用，实现了商品购买时的数量选择功能。点击加号或减号按钮可以增加或减少数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

购买数量加1 减 1 发现使用的地方挺多的,备份一下.


#goumaiqueren  .ctrnum-wrap {
    display: inline-block;
    height: 32px;
    border: 1px solid rgba(153,153,153,0.8);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    overflow: hidden;
    font-size: 0;
    vertical-align: middle;
}


#goumaiqueren .ctrnum-wrap .minus, 
#goumaiqueren .ctrnum-wrap .plus {
    display: inline-block;
    position: relative;
    z-index: 0;
    width: 35px;
    height: 30px;
    line-height: 28px;
    text-align:center;
    vertical-align:top;
    -ms-touch-action: none;
    font-size:20px;
    touch-action: none;

}

#goumaiqueren .ctrnum-wrap .minus {
    border-right: 1px solid #999;
}

#goumaiqueren .ctrnum-wrap .plus { 
     border-left: 1px solid #999;
} 

#goumaiqueren .ctrnum-wrap .qty {
    width: 48px;
    padding: 0 2px;
    margin: 0;
    line-height: 1;
    height: 30px;
    line-height: 30px;
    font-size:20px;
    font-size: 1.5rem;
    vertical-align: top;
    text-align: center;
    color: #333;
    font-weight: bold;
    border: none;
    outline: 0;
    font-family: tahoma,arial,simsun;
}

<div class="am-cf shuliang row">
            <div class="am-fl">数量 </div>
            <div class="am-fr">
                <span class="ctrnum-wrap">
                    <span class="minus dis" id="minus">-</span>
                    <input type="text" id="GouMaiShuLiang" name="GouMaiShuLiang" value="1" class="qty" autocomplete="off" readonly="readonly">
                    <span class="plus dis" id="plus">+</span>
                </span>
            </div> 
        </div>

        <script>

            $("#minus").click(function () {
                var v = $("#GouMaiShuLiang");
                v.val(v.val() * 1 - 1);
            })
            $("#plus").click(function () {
                var v = $("#GouMaiShuLiang");
                v.val(v.val() * 1 + 1);
            })
        </script>